C++ ときどき ごはん、わりとてぃーぶれいく☆

USAGI.NETWORKのなかのひとのブログ。主にC++。

AndroidのChromeの開発者ツールをUSB接続したPCのChromiumでにゃんにゃんする方法

LinuxやWindowsなどのPC向けのChromium(≈Chrome)ではF12キー(或いはCTRL+SHIFT+Iキー)に開発者ツールがアサインされて居て、ウェブ開発に大変便利な、というか必須のツールですね。

さて、AndroidChromeではF12を…どうやって押しましょう?と、いうか開発ツールが仮にそのまま使えたとしても、実機やエミュレーターAndroidChromeで開発者ツールがニョキッと出てきても使い難い。そこで(恐らく)通常はテスト用のAndroid端末をPCにUSB接続し、USBデバッグを用い、PC側でAndroidChromeの開発者ツールを使います。

方法

  1. PCにAndroid SDKを導入し、`adb`コマンドを使用可能な状態にする。
  2. PCにChromiumを導入する。
  3. Android端末のUSBデバッグを有効にする。
  4. Android端末をPCにUSB接続する。
  5. Android端末のChromeの設定→デベロッパーツール→USBウェブデバッグを有効化、チェックON。
  6. PCで`adb forward tcp:9222 localabstract:chrome_devtools_remote`とコマンドを叩く。(複数のAndroid端末を挿している場合は`adb`の`-s`オプションも必要かも)
  7. PCのChromiumで`localhost:9222`へ接続。

※PC側もFirefoxOperaではなくChromiumじゃないと当然Chromeの開発者ツールは使えない。(画面だけ転送しているとかHTML化しているとかではないので)

localhost:9222 の使い方

上記方法の手順でPCのChromiumにてlocalhost:9222へ接続すると、

f:id:USAGI-WRP:20121201160053p:plain

こんな具合にAndroid端末のChromeで表示中のタブが列挙されます。

今回は例として、どんぐりコロコロ ホームという小岩井の"モクアート"のサイトをAndroidChromeで開いて見ています。(※最近たまたま見ていたので履歴にあっただけですよ・x・)

PCのChromiumからAndroidChromeのタブに相当するプレビューを開く(クリックする)と、

f:id:USAGI-WRP:20121201160727p:plain

こんな具合でPCのChromiumAndroidChromeの開発者ツールを開けます。勿論、開発者ツール左下辺りのHTML要素のインスペクター(虫眼鏡のアイコン)をぽちっとPCのChromiumからクリックして、AndroidChromeで対象としたい要素をタップするなんて事も対応しています。