Hatena::ブログ(Diary)

Hacking My Way 〜 itogのhack日記 RSSフィード Twitter

2012-02-13

Chromeのリモートデバッグ機能がすごい!

ここの動画で紹介されているリモートデバッグがかなり強力なツールなので紹介します。

D

事前準備

開発マシン側にadbというツール&Android端末のUSBデバッグを有効にする必要があります。

開発してる人なら説明いらないので省略。

リモートデバッグを有効にする

Android端末と開発マシンをUSBで接続して、端末が認識されていることを確認して下さい。

開発マシンのターミナルで以下コマンドを打ちます。

$ adb forward tcp:9222 localabstract:chrome_devtools_remote

Android端末のChrome for Androidでメニューから

設定→デベロッパーツール→USBウェブでバッグを有効化にチェック

開発マシンのブラウザで下記URLにアクセスします。

localhost:9222

すると、Chrome for Androidのタブで開いているURLの一覧が表示されます。

f:id:itog:20120213114930p:image

デバッグしたいページのURLをクリックすると、PC版ChromeのデベロッパーツールがChromeの全画面で開きます。

f:id:itog:20120213114933p:image

これで、あたかもPC版Chromeのデバッグをしているように、Android版Chromeのデバッグをすることができます。

例えば、マウスオーバーしたところがハイライトします。

f:id:itog:20120213114928p:image:w200

HTMLを書き換えると、その変更が即座に反映されます

こんなふうに書き換えると

f:id:itog:20120213114932p:image

こんなふうに表示されます。

f:id:itog:20120213114927p:image:w200

設定も簡単なので、ICS以降でAndroid用のWeb開発する人には手放せないツールになりそうですね。

これはすごいなぁ。

Chrome for a Multi-Device World - Google Chrome

あわせて読みたいブログパーツ テクノラティのお気に入りに追加する