AndroidのChromeで見ているページをPCでデバッグする方法
AndroidのChromeを用いてデバッグをしたいということがある。その際のデバッグ方法として、自分が知っている限りでは以下の2つがあった。
- Android SDKをダウンロードしてデバッグ
- ChromeにADBという拡張機能をインストールしてデバッグ
しかしどちらもAndroid SDKのダウンロードと設定や、PCのChromeに拡張機能をインストールしないといけなく、正直めんどい。と思ったら、Chrome バージョン32以上からは上記のSDKなどをダウンロードしなくてもPCからデバッグができるようだ。
最近のAndroid Chromeのリモートデバッグ - hokaccha.hamalog v2
ということで、Remote Debugging Chrome on Android - Chrome DevTools — Google Developersや他サイトに沿ってデバッグがおこなえるようにしたので、やったことを書いていく。
Android側のUSBデバッグを有効にする
Android 4.2以上のバージョンの場合、開発者向けオプションは初期設定では隠されている。なおAndroid 4.2未満の場合は、設定画面の下の方に開発者向けオプションがある。
Android 4.2以上で開発者向けオプションを表示するには、設定->システム:端末情報内の項目にある「ビルド番号」を7回タップする必要がある。タップし続けると「デベロッパーになるまであとnステップです」と表示されたり、7回タップすると「あなたは今開発者になりました！」と表示されるので分かりやすい*1。
「あなたは今開発者になりました！」と表示されたあと、設定のシステムの所に「開発者向けオプション」が表示されるようになる。そしてそのオプションの中に「USBデバッグ」という項目があるので、チェックを付ける。
それでPCにUSBでAndroidを繋いで無事デバッグ出来るように…というところだが、Windowsの場合は別途Google USB Driver | Android DevelopersからUSB Driverをダウンロードする必要がある。
USBデバッグによると、今つないでいるPCでUSBデバッグを許可するかどうかというポップアップが表示される機種もあるようだが、SO-04E Hatsune Mikuモデル(Android 4.2.2)では表示されなかった。
Chrome側でデバイス検出を有効にする
chrome://inspect/#devices
にChromeでアクセスすることにより、以下のような設定画面が出てくる。
ここから「Discover USB devices」にチェックを入れ、USBデバッグを有効にしたAndroid端末を繋ぐことにより、以下のように各種操作が出来るようになる。
inspectはChromeのdeveloper toolsがそのまま使えたり、アドレス指定でタブを開かせたり、他にもいろいろと出来るので便利。
- なお、タップの間隔はいくら遅くても大丈夫そうだが、戻るボタンなどで前の画面に戻ってしまうと、また最初からタップし直しとなってしまう。