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