Mac+AndroidのChromeブラウザを開発モードで便利にする方法

一昔前は、Firefoxのお得意技だった、デバッグコンソールも、今ではどのブラウザも備えられています。 iPhoneも開発モードで、パソコンのsafariと連動して、コンソール画面が見えるようになっているんだけど、 Androidってコンソール画面っていったいどうすりゃ良いんだ？ と思っていたら、ちゃんと開発モードというのが存在するみたいで、ブログに書いてくれているヒトもいました。 自分がつかっているAndroid端末は、GooglePixel6だったので、ちょっとブログの内容と違っていたので、備忘録を残しておくことにします。 Android の Chrome で開発者ツールを使う方法(Win) Android端末をChromeでデバッグする方法(Mac)

手順1. Androidをビルド番号を７回タップして開発者モードに切り替える

まず、設定画面からの遷移で次の場所に移動します。

Android -> 設定 -> デバイス情報 -> ビルド番号

ビルド番号の表示されている箇所を、７回タップします。 「あと◯回で、開発者モードになりますよ」的なメッセージがおもろいですが、意外と分かりやすいかも。

手順2. 開発者向けオプションで、USBデバッグモードをONにする

次の場所に行くと、「開発者向けオプション」が追加されています。

設定 -> システム -> 開発者向けオプション

USBデバッグをONにします。

手順3. パソコン側でinspectを表示する。

上記の設定が完了したら、パソコンとAndroidをUSBでつなぎます。 次に、パソコンのchromeブラウザで、次のアドレスにアクセスします。 chrome://inspect/#devices こんな感じのページが表示されます。 あとは、AndroidのChromeブラウザで表示しているアドレスが、inspectでリストアップされるので、「inspect」ボタンを押せば、パソコンでも表示されて、同時にコンソールも見ることができます。

あとがき

LAN環境が同じであれば、ワイヤレスモードでの設定をしておくと便利だと思います。