この記事を読んでできること / なにがうれしいの
- PC上で立ち上げたlocalhostのページがスマホで表示できる
- 開発中のWebページがスマホでもチェックできてうれしい
- スマホで見た目を確認しながらPC上でコンソールを確認できる
- スマホ用ページでもprintデバッグやCSSをグリグリいじるアレが利用できてうれしい
- PCのキーボード操作も受け付けてくれるからスーパーリロード(Shift+⌘+R)や「特定のキーを押すとデバッグモードになる」ような場合もさくっと押せてうれしい
環境
- Chromeの入ったMac
- Chromeの入ったAndroid
- 上記をつなぐUSBケーブル
やり方
1 : 開きたいhtmlページがあるところに移動
cd public_html
ls
index.html ...
2 : PHPのビルトインウェブサーバーを立ち上げる
PHP: ビルトインウェブサーバー - Manual
php -S localhost:8080
3 : PC版Chromeからinspectページ chrome://inspect/#devices にアクセス
4 : スマホとPCをUSBケーブルでつなぐ
- 充電用ケーブルじゃないか確認。適当に買うとicos充電用ケーブルとかだったりする。データがやりとりできるものか確認して買おう！
- スマホの開発者向けオプションでUSBデバッグを有効にしておく
5 : inspectページのRemote Targetにスマホ名が表示されているか確認
6 :「Port forwarding」ボタンを押して各種設定を確認
- 「8080 - localhost:8080」がリストにある
- 「Enable port forwarding」にチェックをつける
- Doneボタンを押す
7 : スマホでChromeを開く
8 : inspectページの「Open tab with url」欄に localhost:8080 と入力
9 : inspectページの「inspect」リンクを開く
10 : コンソールが出るのであとはもくもくとデバッグ