2013/01/25

Chrome for Android の USB ウェブデバッグでスマフォWEBサイトをデバッグする

Android 端末にインストールした Chrome を通して、
PC 側の Chrome で WEBページのデバッグができますよと。
試してみました。

用意。

  • Android 端末。
  • Chrome (PC側もAndroid側も)
  • Android SDK

まあぶっちゃけ ココ を見てしまえば終わりなんですが、
Chrome は両方にインストール済として話を進める。

Android SDK と Android SDK Platform-tools の準備。

とりあえず Android SDK をダウンロードして任意の場所に展開。 ~/Library/android-sdk-macosx (以下 SDK_PATH)な感じで僕は置いてる。
SDK_PATH/tools/android
を実行するとなんか (Android SDK Manager) 出るので、Android SDK Platform-tools をインストールする。SDK_PATH/platform-tools っていうディレクトリができてるはず。

Android 端末の設定。

SDK ダウンロードしてる間にでも Android 側の設定をしときます。OSのバージョンが・・・

  • 3.2 以下:[設定] -> [アプリケーション] ->[開発者向けオプション] -> [USBデバッグ]
  • 4.0 以上:[設定] -> [開発者向けオプション] -> [USBデバッグ]
  • 4.2 以上:[設定] -> [この端末について] -> [ビルド番号]を 7回タップ -> 画面戻って戻って[開発者向けオプション] -> [USBデバッグ]

にチェック。日本語のメニュー項目名は違うかも。そして 4.2 以上の端末は隠しコマンド的なのなにそれこわい。

そして、Chrome の[設定] -> [デベロッパーツール] -> [USB ウェブ デバッグを有効化] にチェックを入れておく。

それでは・・・

Android と PC を USBでつなぐ。

adb コマンド叩く (PC 側)

./SDK_PATH/platform-tools/adb forward tcp:9222 localabstract:chrome_devtools_remote

* daemon not running. starting it now on port 5037 *
* daemon started successfully
って出たらOK。

Chrome でアクセス (PC 側)

http://localhost:9222

アクセスすると、Android の Chrome で開いているタブ一覧が出てくるので、好きなのクリック。PC 側の Chrome で デベロッパーツールが開くのでよしなにします。

Enjoy!

※404 的なことになったら
SDK_PATH/platform-tools/adb kill-server
からの
./SDK_PATH/platform-tools/adb forward tcp:9222 localabstract:chrome_devtools_remote
をお試しくだしあ。

ただ・・・


  • Android 標準ブラウザで使えない。
  • 結局は端末依存とかあるし、やっぱり該当の機種がないとアレ。
  • だったら、Chrome でユーザーエージェントいじったほうが早くね?

ヽ(´Д`;)ノアゥ...

結論

FireMobileSimulator すごい。
https://chrome.google.com/webstore/detail/firemobilesimulator-for-g/mkihbloiacgiofaejgagokalpeflnmbe?hl=ja