スマホサイトのデバッグといえば！Android Chromeリモートデバッグをやってみた

ちょい昔に、Android 標準ブラウザでJavascriptのデバッグ方法をメモりましたが、
PCとAndroidをUSBで繋いで、Android Chromeでスマホサイト全体をデバッグするやり方について。

Chromeはver.28からレンダリングエンジンがWebKitからBlinkに変わったこともあり、
昨今「Chromeだけちゃんと動かねー！」とか「Chromeだけ動作がおかしい！」とか、
Chromeでスマホサイトのデバッグが必要な場面が増えてる気がします。

※PC ChromeブラウザでUserAgentを偽造してデバッグすることもできるけど、実機じゃないと正確性に欠けるんで。

まずPC側
(1)Android SDKのadb(Android Debug Bridge)ツールをインストールしておく

続いて、Android側 ※SO-02Eの場合
(2)設定→開発者向けオプション→USBデバッグ をチェックし、ダイアログが出たらOK

(3)Android Chromeでデバッグしたいサイトを開く

そして、コマンドプロンプト
(4)adb.exeがあるディレクトリに移動し、”adb devices”でデバイスが認識されているかを確認
※認識に失敗したら”adb kill-server command to resolve”を実行し停止させる

(5)”adb forward tcp:9222 localabstract:chrome_devtools_remote”を実行

ここでまたPC
(6)Chromeのアドレスバーに、”localhost:9222″を入力
※そうすると、Android Chromeで開いているサイトが表示される

(7)デバッグしたいサイトを選択

あとは、PCのChrome Developer Toolsの使い方といっしょ。

“Elements”タブで、HTML,CSSを確認したり編集したり、
“Resources”タブで、WebStorageやSessionStorage()、Cookieの中身を確認したり編集したり、
“Network”タブで、ネットワークへのアクセスを確認したり、
“Sources”タブで、Javascriptの表示、ブレークポイントを貼ってデバッグしたり、
“Timeline”タブで、パフォーマンスを計測したり、
“Profiles”タブで、CPUやメモリ、CSSセレクターのプロファイルを確認したり、
“Audits”タブで、ネットワーク、ウェブページのパフォーマンスを確認したり、
“Console”タブで、JavascriptやHTMLのエラーを表示したり、
“PageSpeed”タブで、ウェブページを高速化するためのアドバイスをもらったり、

といった、いろんな使い方があるので良いんじゃないでしょうか！！