AndroidのChromeの開発者ツールをUSB接続したPCのChromiumでにゃんにゃんする方法
LinuxやWindowsなどのPC向けのChromium(≈Chrome)ではF12キー(或いはCTRL+SHIFT+Iキー)に開発者ツールがアサインされて居て、ウェブ開発に大変便利な、というか必須のツールですね。
さて、AndroidのChromeではF12を…どうやって押しましょう?と、いうか開発ツールが仮にそのまま使えたとしても、実機やエミュレーターのAndroidのChromeで開発者ツールがニョキッと出てきても使い難い。そこで(恐らく)通常はテスト用のAndroid端末をPCにUSB接続し、USBデバッグを用い、PC側でAndroidのChromeの開発者ツールを使います。
方法
- PCにAndroid SDKを導入し、`adb`コマンドを使用可能な状態にする。
- PCにChromiumを導入する。
- Android端末のUSBデバッグを有効にする。
- Android端末をPCにUSB接続する。
- Android端末のChromeの設定→デベロッパーツール→USBウェブデバッグを有効化、チェックON。
- PCで`adb forward tcp:9222 localabstract:chrome_devtools_remote`とコマンドを叩く。(複数のAndroid端末を挿している場合は`adb`の`-s`オプションも必要かも)
- PCのChromiumで`localhost:9222`へ接続。
※PC側もFirefoxやOperaではなくChromiumじゃないと当然Chromeの開発者ツールは使えない。(画面だけ転送しているとかHTML化しているとかではないので)
localhost:9222 の使い方
上記方法の手順でPCのChromiumにてlocalhost:9222へ接続すると、
こんな具合にAndroid端末のChromeで表示中のタブが列挙されます。
今回は例として、どんぐりコロコロ ホームという小岩井の"モクアート"のサイトをAndroidのChromeで開いて見ています。(※最近たまたま見ていたので履歴にあっただけですよ・x・)
PCのChromiumからAndroidのChromeのタブに相当するプレビューを開く(クリックする)と、
こんな具合でPCのChromiumでAndroidのChromeの開発者ツールを開けます。勿論、開発者ツール左下辺りのHTML要素のインスペクター(虫眼鏡のアイコン)をぽちっとPCのChromiumからクリックして、AndroidのChromeで対象としたい要素をタップするなんて事も対応しています。