「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 のデバッグだったり、ネットワークタブで読込み速度などを確認したり…
ぜひご活用ください。