Remote TestKitとChrome for Androidの連携

概要

Chrome for Android の新機能であるリモートデバッグ機能を、Remote TestKit経由でもご利用いただけるようになりました。
Chrome for Androidのリモートデバッグ機能とは、Chrome for Android上で表示をしているサイトに対して、PC上のChrome DevToolsを使うことが出来る機能です。
この機能とRemote TestKitを合わせれば、様々な端末でサイトやWebアプリの検証を行うことができます。
※本機能を利用いただくにはPC上にadbの設定がされている必要があります。
なお、特に指定のない場合、「コマンドラインツール」とは、Windowsならば「コマンドプロンプト」Macならば「ターミナル」を指します。

レンタル端末へのChromeのインストールと設定

  1. Chrome for Androidを実行し、メニューから「設定」を押下します。
  2. 下部にある「デベロッパーツール」を押下します。
  3. 「USBウェブデバッグを有効化」のチェックボックスにチェックをいれてください。
  4. 検証を行いたいウェブページを表示しておきます。

chrome設定

PCとスマートフォンのChromeを接続

Eclipse(ADT)・DDMS・adbとの連携を設定していない場合は、「端末の操作」を参考に、端末ウィンドウより[有効 - ADT・DDMS・adb]メニューを選択し、ADT・DDMS・adb連携を有効化します。

コマンドラインツールを起動し、以下のコマンドを入力します。

adb forward tcp:9222 localabstract:chrome_devtools_remote


adb forward

PCのChrome DevToolsでのスマートフォンサイト検証

PC上のGoogleChromeから次のURLにアクセスしてください。

http://localhost:9222/

PC Chrome


スマートフォンで開いておいたウェブページが表示されていると思います。
開いてたページをクリックすると、スマートフォンで表示されているサイトに対してPC上のChrome DevToolsを使うことができます。
操作は普段PCで利用する時と同じで実際の画面を見ながらDOMの内容を確認したりデバッグすることができます。


Developer Tools

※本情報は掲載時点の情報となります