Chrome for Androidでリモートデバッグ

さて、Adobe Edgeツール&サービスが発表されましたね。リモートデバッグではAdobe ShadowがEdge Inspectに名をかえて正式にリリースされたようです。まぁ特に変わったことはないんですけど、ダウンロードするのに、Adobeのアカウントが必要になったとかでちょいめんどくさくなりました。Shadowの使い方はこことか参照するとよい。

ここではあえて、時代の流れを読まずにChrome for Androidでリモートデバッグに挑戦したいと思います。ChromeはAndroid4.0以降対応なんですね、必死こいて2.3の端末機にインスコしようとググってました。あと、4.1からデフォルトのブラウザーになるとかで今後のメインストリーム確実な感じです。

各種インストール

まぁ、インストールの仕方などは上記リンクに、ほぼ書いてあるんですけどメモ代わりに残しておきます。あ、自分Macっす！ SDKとChromeをインストール。SDKはどっか任意の場所に保存して、/Applications/android-sdk/tools/android（僕の場合はアプリケーションディレクトリにandroid-sdkという名前で置いた）を実行すると、Android SDK Managerが起動するので、Android SDK Platform-toolsをインストール。

/Applications/android-sdk/platform-toolsのAndroid Debug Bridge (adb)コマンドが必要になってくるので、PATHを通しておく。.bash_profileとかに下記のように記述する。 

#.bash_profile
PATH=$PATH:/Applications/android-sdk/platform-tools
んで、読み込ませておく。 
$ source .bash_profile
PATHが通ったので、次回からは下記コマンドだけOK。 
$ adb forward tcp:9222 localabstract:chrome_devtools_remote

各種設定

んで、Androidの方の設定で、【本体設定】>【開発者向けオプション】>【USBデバッグ】にチェキラーぁぁぁっｌ！！

んで、Chrome for Androidの方の設定で、【設定】>【デベロッパーツール】>【USBウェブデバッグを有効化】にチェキラーぁぁぁっｌ！！

これらも一回設定しておけばOK.

使ってみる

前述のadb forwardなんちゃらってコマンド打ち込んで。localhost:9222をPC Chromeで開いてみましょう。 
http://localhost:9222/
このとき、USBでAndroid実機をつなげて、Chrome for Androidでデバッグしたいページを開いておきましょう。そうするとAndroidで開いてるページがPCから確認できます。

デバッグしたいページをクリックするとデベロッパーツールが立ち上がります。

見てもらえるとわかるように、PCのデベロッパーツールとほぼ同等の機能が使えます。比較検討のためにEdge Inspect（weinre）で開いたデベロッパーツールのキャプチャを置いときますね ↓

weinreでもNetworkとかTimeline使えるけど、Chrome for Androidでのリモートデバッグのほうがより細かいとこまで見れたり全体的に高機能かつサクサク動きますです、はい。個人的に一番バビったのが拡張機能のPageSpeedが普通に動いてて、なおかつ評価設定がちゃんと【モバイル】として評価されていたの感動しました。

これまでも、デベロッパーツールの設定でUAをスマホにしたりしてスマホサイトをPageSpeedで評価できたのですが、これはあくまでデスクトップ基準での評価でして、例えばオンラインのPageSpeedでt32k.meを評価してみると、デスクトップ版92点なのに対して、モバイル版は88点と厳しめの評価です。改善策のサジェスチョンも微妙に違ったり（違いに関してはここ参照）しますので、Chrome for Androidのリモートデバッグ調べてたら思わぬ収穫を得たなという感じですね。

そんな感じで、こんな機能もあるぜってのあったら教えて下さい。