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

2023年11月27日

Javascript スマートフォン

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

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

まず、設定画面からの遷移で次の場所に移動します。
Android -> 設定 -> デバイス情報 -> ビルド番号
ビルド番号の表示されている箇所を、7回タップします。 「あと◯回で、開発者モードになりますよ」的なメッセージがおもろいですが、意外と分かりやすいかも。

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

次の場所に行くと、「開発者向けオプション」が追加されています。
設定 -> システム -> 開発者向けオプション
USBデバッグをONにします。

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

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

あとがき

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

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。