Edited at

Chromeでスマホにlocalhostのページを表示させてコンソールデバッグ

More than 1 year has passed since last update.


この記事を読んでできること / なにがうれしいの


  • PC上で立ち上げたlocalhostのページがスマホで表示できる


    • 開発中のWebページがスマホでもチェックできてうれしい



  • スマホで見た目を確認しながらPC上でコンソールを確認できる


    • スマホ用ページでもprintデバッグやCSSをグリグリいじるアレが利用できてうれしい

    • PCのキーボード操作も受け付けてくれるからスーパーリロード(Shift+⌘+R)や「特定のキーを押すとデバッグモードになる」ような場合もさくっと押せてうれしい




my環境


  • 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 : コンソールが出るのであとはもくもくとデバッグ