Chrome Remote Debug on Androidを使って、実機からローカルのアプリケーションに接続したりデバッグしたりする

Remote Debug on Androidを使うことで、ローカルPCで実行中のアプリケーションに手元のAndroid端末から接続することができる。さらに、DevToolsのウィンドウを開いて現在開いているページのデバッグを行うことも出来ていろいろ捗るので、ChromeAndroidの設定等をまとめました。

ADB Chrome Extentionインストール

Chrome Web StoreからADB Extentionをインストールする。
f:id:yyhayashi303:20131106015326p:plain

Android端末のUSBデバッグモードをONにする

設定 > 開発者向けオプション > USBデバッグ をONにする。
f:id:yyhayashi303:20131106015907p:plain

リモートデバッグの実行

USBでPCと端末を繋ぎ、Chromeの右上にあるドロイド君のアイコンからStart ADBを選択する。
f:id:yyhayashi303:20131106020700p:plain
端末側でChromeを起動し、ドロイド君のアイコンからView Inspection Targetsを選択すると下記のような画面が開き、Android端末で表示しているページの一覧が表示される。
f:id:yyhayashi303:20131106021852p:plain
対象ページのInspectというリンクをクリックすると、DevToolsが開きデバッグをすることができる。
f:id:yyhayashi303:20131106022346p:plain

ローカルのアプリケーションに接続する

chrome://inspect/のページの右上の方にあるConfigure port forwardingボタンをクリックし、ローカルサーバーのポートとIPアドレスを入力する。
f:id:yyhayashi303:20131106023638p:plain
Enable Port Forwardingにチェックを入れると、Android端末からlocalhost:8000に接続することができる。
f:id:yyhayashi303:20131106023837p:plain

まとめ

まとめって程でもないけど、Androidの場合、端末固有のバグなんかが結構あって、PCブラウザでUAを変えて確認しても再現しなかったりして調査が難航することがあったけど、これを使えばローカル環境で実機でデバッグしながら確認できるので、もっと早く使えばよかったと思った。