Tweet

Pocket

photo credit: Franz & P via photopin cc

PC上でUser-Agentを切り替えてWebサイトのテストを行いますが、フォントが違ったり動きが微妙に違ってなかなか効率が上がらなく、どうにかリモートデバッグできないか調べてみました。
忘れないうちにChromeでのリモートデバッグ方法をメモ

Index

• テスト環境
• Google Develplersの記載
• 実際の実行手順
• まとめ

テスト環境

スマートフォン
OS : Android 4.1.1
Chrome : 31

パソコン
OS : lubuntu
Chrome : 26
JDK : 1.6
ADB : 1.0.26

リモートデバッグするパソコンにはJDKとADB(Android Debug Bridge)を事前にインストールする必要があります！

Google Develplersの記載

Google Developersを参考に設定を行っていましたが結果できませんでした。

【できなかった事】
説明では「On the mobile device, launch Chrome. Open Settings > Advanced > Developer Tools and check the Enable USB Web debugging option as shown here:」とあるがそもそも「Advanced」メニューがない！
隠しメニューじゃないかと思い色々調べたのですが見つけられませんでした・・・

で、結果的にできたのはADB起動時にオプションを指定するだけの方法で簡単にできました！

実際の実行手順

１．パソコンとスマートフォンをUSBケーブルで接続

２．スマートフォン側でUSBデバッグモードに設定

３．パソコン側で以下のコマンドを入力してADBを起動
※2行目、3行目はコマンド実行結果のメッセージです。

$ ./adb forward tcp:9222 localabstract:chrome_devtools_remote
* daemon not running. starting it now on port 5037 *
* daemon started successfully *

４．スマートフォン側のChromeでデバッグするWebサイトを表示

５．パソコン側のChromeへ以下のURLを入力

http://localhost:9222/

スマートフォン側と正しく接続されると以下の画面表示されます。

６．Inspectable Pagesから対象サイトを選択
これでパソコン側でデバッグコンソールが表示されるようになります。

まとめ

これ自分が作ったサイトのデバッグはもちろん、他のサイトの研究にも便利そうです！
Google Developersに記載されている方法では正しく動作しなかったのですが、これ以外にも色々記載があるので順次試してみたいと思います。

参考にしたサイト
ブラウザ上でデバッグ Chrome for Android向けの開発ツールがスゴイ！（http://matome.naver.jp/odai/2132866723861059501）

関連記事 :

Android端末上でOpenCVによる画像ぼかし処理の表示と速度 [Android] HTC端末と「adb server is out of date. killing…」メッセージ [Appium] Androidのテスト自動化ツールの検証 ～準備～