読者です 読者をやめる 読者になる 読者になる

Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

SDK不要Android端末のリモートデバッグChrome拡張機能「ADB」

Chrome Android

こんにちは、石尾です。

Android端末のChromeをリモートデバッグする場合、Android SDKをインストールして、adbコマンド(Android Debug Bridge)を利用していました。
adbコマンドのリモートデバッグ
これが当たり前だと思っていましたが、Chrome拡張機能「ADB」を利用すれば、SDKをインストールする必要はありません。

PC:
 OS:Windows7(64bit)
 Chromeバージョン:30.0.1599.101

Android端末:
 OS:Android4.0.3
 Chromeバージョン:30.0.1599.82

1.インストール

PCのChromeからChrome Web Store - ADBにアクセスし、インストールします。

f:id:IntelligentTechnology:20131101131730p:plain:w400
f:id:IntelligentTechnology:20131101132037p:plain:w150
f:id:IntelligentTechnology:20131101132112p:plain:w150
インストールすると、メニューに「ADB」アイコンが追加されます。
f:id:IntelligentTechnology:20131101133219p:plain

2.使ってみます

PCとAndroid端末をUSB接続しておきます。
Android端末のChromeを起動し、Chromeの設定画面[詳細]-[デベロッパーツール]-[USBウェブデバッグ]をONに設定します。

f:id:IntelligentTechnology:20131101135152p:plain:w400
f:id:IntelligentTechnology:20131101135213p:plain:w400
f:id:IntelligentTechnology:20131101135225p:plain:w400
f:id:IntelligentTechnology:20131101135237p:plain:w400

PCのChromeで追加された「ADB」アイコンをクリックし、メニュー[Start ADB]をクリックします。

f:id:IntelligentTechnology:20131101140607p:plain:w150
「ADB」アイコンが緑色になります。
f:id:IntelligentTechnology:20131101141110p:plain
タスクマネジャーでも、adb.exeプロセスが動いていることがわかります。
f:id:IntelligentTechnology:20131101141322p:plain:w300

PCのChromeで「ADB」アイコンをクリックし、メニュー[View Inspection Targets]をクリックします。

f:id:IntelligentTechnology:20131101141724p:plain:w150
ChromeのInspect画面(chrome://inspect/)が表示され、接続しているデバイスとChromeでアクセスしているサイトが表示されます。
f:id:IntelligentTechnology:20131101143742p:plain:w500
そのサイトの[inspect]をクリックすると、DeveloperToolsが表示され、リモートデバッグができます。
f:id:IntelligentTechnology:20131101142437p:plain:w400
DeveloperTools上で、CSSを変更すると、Android端末のChrome画面が切り替わります。bodyタグのbackground属性をred(赤色)に変更してみました。
f:id:IntelligentTechnology:20131101143430p:plain:w400
f:id:IntelligentTechnology:20131101143438p:plain:w400

3.感想

数年前までは、ChromeAndroid版とPC版に差があり、このようなことは出来なかったと思います。Chrome拡張機能は、インストールも簡単で使い勝手も楽です。今後は、Chrome拡張機能にも視野を入れて、よりよい開発環境を模索しようと思います。