一昔前は、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環境が同じであれば、ワイヤレスモードでの設定をしておくと便利だと思います。
