Site icon Tips Note by TAM

Android の Chrome で開いたページを、PC から DevTools でデバッグする

「iPhone でサイトを開いて、Mac の SafariからそのページをWebインスペクタで確認する」という記事に続きまして、同様のことを Android でも行う方法を紹介したいと思います。

Android でサイトを開き、Mac の Chrome からそのページを開発者ツールで確認する、という方法です。

参考記事:

SafariのWebインスペクタを使ってみる

Android側の前準備

  • 「設定」→「開発者向けオプション」→「USBデバッグ」をオンにします

「開発者向けオプション」は、初期状態では非表示になっていることが多いようです。その場合は「設定」→「端末情報」→「ビルド番号」のところを 7回ほど続けてタップしてみてください。メッセージが表示され、「開発者向けオプション」が有効になります。(なんか昔のファミコンの隠しコマンドっぽいですね……!)

確認方法

  • Android と Mac を、USBケーブルで接続します。
  • 対象のページを、Android の Chrome で開きます
  • Mac の Chrome から、アドレス chrome://inspect/ を開きます
  • すると画面にAndroidの端末名と、開いているページの情報が出てくるので、ページ名の下にある inspect というリンクをクリックすると……

こんな感じで、DevTool でいろいろ確認できます。
べんり!!!

シンプルにコーディングやCSSの調整だったり、JavaScript のデバッグだったり、ネットワークタブで読込み速度などを確認したり…
ぜひご活用ください。