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

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

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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.