Mac/PCからのAndroid上のブラウザのリモートデバッグのまとめ

スマートフォンやタブレットが主流になりつつあるが、それらモバイルデバイスでWebのデバッグするのは楽ではない。User Agent文字列を変更してモバイルデバイス上のブラウザの振りをしたMacやPCのブラウザからデバッグする方法もあるが、モバイルデバイスのブラウザの機能がMacやPCと同一ではなく、モバイル特有の状況もあるため、モバイルデバイスそのものを使った状態でデバッグしなければいけないことも多い。

そのような際に使われるのがリモートデバッグだ。

Mac/PCとAndroidの両方にブラウザを提供している主流ブラウザとしてはChromeFirefoxOperaがあるが、このリモートデバッグ機能はこの3種のブラウザすべてに備わっている。また、ブラウザ開発元ではないが、Adobeもリモートデバッグ機能を提供している。すでに使っている人も多いと思うし、それぞれ多くの情報が提供されているのだが、ここではそれらをまとめておきたい。

Chromeのリモートデバッグ

Chromeのリモートデバッグは、Android SDKにあるadb(Android Debug Bridge)を用いて、AndroidデバイスにUSBケーブルで接続して行う。事前準備としては、Mac/PCにAndroid SDKをインストールし、USBケーブルでデバッグができる状態にしておく。

その後、Android側のChromeでリモートデバッグを有効化する([設定] → [詳細設定 / デベロッパーツール] → [USB ウェブ デバッグを有効化])。

次に、Mac/PC側のadbで以下のコマンドを実行する。

adb forward tcp:9222 localabstract:chrome_devtools_remote

あとは、Mac/PC側のChromeから "localhost:9222" にアクセスすることで、Android側のChromeのタブで開かれているWebがサムネイルで表示されるので、そこからデバッグしたいWebをクリックすると良い。お馴染みのChromeデベロッパーツールでデバッグできる。

Inspectable pages for Chrome remote debugging*1

この方法の利点は、後述するOperaAdobeのツールとは異なり、デバッグする側のMac/PCとデバッグされる側のAndroidがネットワークで接続されていなくても構わない点だ。Androidデバイスが、モバイル通信事業者経由でインターネットに接続されている場合、Mac/PCは直接はそのAndroidに接続できない。このような場合でも、USBケーブルでの接続でデバッグを実現するこの方法は利用できる。

逆に、面倒な点としては、Android SDKをインストールし、使えるようにして置かなければいけないことと、利点の逆になるが、WiFiなどでMac/PCとAndroidがネットワークで接続できる場合でも、USBケーブルで接続しなければならない点だ。

参照:

Firefoxのリモートデバッグ

Firefoxのリモートデバッグは2種類ある。Chrome同様にAndroid SDKのadbを用いてUSB接続するものと、ネットワーク接続するものだ。

まず、USB接続の場合を説明しよう。

事前準備として、Mac/PCにAndroid SDKをインストールし、USBケーブルでデバッグができる状態にしておくことまでは同じだが、リモートデバッグを有効にする方法が異なる。

AndroidおよびMac/PC側双方のFirefoxで "about:config" を開き、"devtools.debugger.remote-enabled" を "true" にし、Firefoxを再起動する。

次に、Mac/PC側のadbで以下のコマンドを実行する。

adb forward tcp:6000 tcp:6000

その後、Mac/PC側のFirefoxからリモートデバッグを実行する([ツール] → [Web 開発] → [開発ツールバー] で開発ツールバーを有効にし、[開発ツールバー] から [リモートデバッガ] を実行する)。


リモートデバッガが起動されると、接続先のホストとポート番号の入力が求められるが、変更していなければ、既定の "http://localhost:6000" のままで構わない。

以上で、Firefoxのデバッガでデバッグが行えるようになる。

この方法もAndroid SDKを用い、USBケーブルでAndroidデバイスとMac/PCを接続するので、利点や欠点はChromeのリモートデバッグと同じだ。

参照:Firefox for Android をリモートデバッグ | Mozilla Developer Street (modest)

ネットワーク接続を用いる場合は、Android上のFirefoxで "about:config" し、"devtools.debugger.force-local" を "false" にする。その後、Mac/PC側のFirefoxのリモートデバッガで先ほどのUSB接続で "localhost:<ポート番号>" となっていた部分の "localhost" をAndroidデバイスのIPアドレスに置き換える。

Android上のFirefoxに次のような確認が出るので、[OK] を押して、接続は完了。あとは、Mac/PC上のFirefoxのリモートデバッガでデバッグできる。

参照:Remote Debugging on Firefox for Android ✩ Mozilla Hacks – the Web developer blog

Operaのリモートデバッグ

Operaのデスクトップブラウザには、Opera Dragonflyという秀逸なデバッガが標準装備されている*2OperaのリモートデバッグはこのDragonflyの機能として実装されている。

OperaのリモートデバッグChromeFirefoxとは異なり、Android SDKは必要ない。USBケーブルでAndroidデバイスとMac/PCが接続されている必要もない。ただし、デバッグ対象となるAndroidデバイスとMac/PCが同一のIPネットワーク上に存在することが条件となる。通常はWiFiを用いることとなるであろう。

まず、Mac/PC側のOperaでDragonflyを起動し、メニューの右側にある[リモートデバッグ]をクリックする。


ここで、Androidデバイス側から接続するポート番号の入力を求められる。セキュリティソフトの設定などで必要があれば、ポート番号を変更し、[適用]をクリックする。

次に、Android側のOperaから "opera:debug" を開き、Opera Dragonflyが動作しているMac/PCのIPアドレスとポート番号を入力する。

その後、デバッグをするWebサイトやアプリケーションのURLを入力して、アクセスすれば、Mac/PC側のOpera Dragonflyでデバッグできる。

この方法は、追加のソフトウェアが一切必要ないのと、USB接続が必要ない点だ。Operaでのデバッグで十分であり、デバッグする側とされる側がネットワークで接続可能であれば、一番お手軽であろう。

参照:Remote Debugging | Documentation | Opera Dragonfly – Opera's built-in developer tools

Adobe Edge Inspect

Adobe Edge Inspectは、以前にAdobe Shadowとして公開されていたもので、Androidだけでなく、iOSやKindleなどのマルチデバイスのブラウジング環境でのデバッグができる。

参照:

Adobe Edge Inspectを利用するには少し手間がかかる。

まず、Adobe Edge Inspectには無償版と有償版があり、有償版を使うためには、Adboe Creative Cloudの正規メンバー(有償)になるか、Edge Inspectのサブスクリプションに加入しなければならない。無償版の場合であっても、Adobe Creative Cloudの無償メンバーになる必要がある。無償版と有償版の違いは同時に複数デバイスに接続できるか否かである。

次に、Adobe Creative Cloudのメンバーとして、Adobeの公式ページであるEdge Inspect : Adobe Creative Cloudにアクセスし、Mac/PC側にInspectとChrome拡張をインストールする(つまり、リモートデバッグにはMac/PC側のChromeから利用することになる)。

Mac/PCとAndroidデバイスはネットワークで接続されるが、そのためにはAppleBonjourを利用する。Macには既定でインストールされているが、Windowsの場合には別途インストールする必要がある。Edge InspectのインストールフォルダーにBonjourインストーラーが用意されてので、それを起動する*3

Androidデバイス側には、Play StoreからAdobe Edge Inspectをインストールする(ここから)。

以上で事前準備は終わりだ。

実際のリモートデバッグの開始は、まずMac/PCとAndroidデバイスのペアリングを行う。Mac/PCとAndroidの双方でEdge Inspectを起動すると、Bonjourの機能により、同一ネットワーク上でEdge Inspectが起動されているデバイスが列挙される。

上はAndroidデバイス上のEdge Inspectの画面であるが、接続するMac/PCを選択すると、パスコードが表示される。

このパスコードをMac/PC上のChromeの拡張で入力する。

以下がChrome拡張のアイコン。プラスマーク("+")が付いているのが、接続可能なことを示している。

デバッグ対象のデバイスであることを確認して、先ほどのパスコードを入力する。

実際のデバッグは、Mac/PC側のChromeで対象となるWebサイト・アプリケーションを開き、それを別ウィンドウで起動されているEdge Inspect*4で操作する。Androidデバイスとの接続が確立された後のChrome拡張の画面で "< >"をクリックすることでEdge Inspectの画面が表示される。

Edge Inspectが動作しているAndroidはスリープしないようになっており、この後の一切の操作はMac/PC側のChromeから行える。つまり、Chromeで開かれているアクティブなタブがデバッグ対象となる。

Edge Inspectで再度デバッグ対象を確認し、クリック。

すると、次のような画面になりデバッグができる。

デバッグ以外にもスクリーンショットを撮るなどの機能も用意されている。

参照:

なお、Edge Inspectはweinreをリモートデバッグに用いている。これについては以下を参照して欲しい。

参照:

以上、簡単に各リモートデバッグについて紹介した。肝心のデバッガの機能については紹介していないので、「参照」として紹介したリンク先を読んで欲しい。

*1:Remote Debugging - Google Chrome Mobile ― Google Developersより

*2:Opera Dragonfly 入門 (Japanese) - Dev.Opera

*3:または、次のインストーラーを使う。Win32: \Program Files\Adobe\Adobe Edge Inspect\BonjourPSSetup.exe、Win64: \Program Files (x86)\Adobe\Adobe Edge Inspect\BonjourPSSetup.exe

*4:Chromeの1ウィンドウ