ちょい昔に、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
Android Chromeリモートデバッグ

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

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

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

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

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

あとは、PCのChrome Developer Toolsの使い方といっしょ。
Android Chromeリモートデバッグ

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

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

Related posts:

  1. Android,iPhoneを失くしちゃった時のために、入れておきたいアプリ
  2. Androidアプリを開発して思ったこと。
  3. Androidの実機でウェブサイトのJavascriptをデバッグする方法
  4. スマートフォンのセキュリティ対策まとめ。
  5. スマートフォン最適化サイトを開発して思ったこと。