Mac/PCからのAndroid上のブラウザのリモートデバッグのまとめ
スマートフォンやタブレットが主流になりつつあるが、それらモバイルデバイスでWebのデバッグするのは楽ではない。User Agent文字列を変更してモバイルデバイス上のブラウザの振りをしたMacやPCのブラウザからデバッグする方法もあるが、モバイルデバイスのブラウザの機能がMacやPCと同一ではなく、モバイル特有の状況もあるため、モバイルデバイスそのものを使った状態でデバッグしなければいけないことも多い。
そのような際に使われるのがリモートデバッグだ。
Mac/PCとAndroidの両方にブラウザを提供している主流ブラウザとしてはChrome、Firefox、Operaがあるが、このリモートデバッグ機能はこの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のデベロッパーツールでデバッグできる。
この方法の利点は、後述するOperaやAdobeのツールとは異なり、デバッグする側の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という秀逸なデバッガが標準装備されている*2。OperaのリモートデバッグはこのDragonflyの機能として実装されている。
OperaのリモートデバッグはChromeやFirefoxとは異なり、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などのマルチデバイスのブラウジング環境でのデバッグができる。
参照：
- アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール − Publickey
- ［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に − Publickey
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デバイスはネットワークで接続されるが、そのためにはAppleのBonjourを利用する。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 : Adobe Creative Cloud（Adobe公式ページ）
- Adobe Edge Inspect：様々なデバイスで手軽にブラウザーテスト | Adobe Developer Connection（Adobeによる解説ページ。インストールから使い方まで解説されている）
- Adobe Community: Adobe〓 Edge Inspect インストールガイド（Adobeによる公式ガイド）
- Adobe Edge Inspect インプレッション | ウェブインパクトエンジニアブログ
なお、Edge Inspectはweinreをリモートデバッグに用いている。これについては以下を参照して欲しい。
参照：
- weinre - Home（公式サイト（英語））
- 第3回 weinreを使ったiOS／Androidアプリの動作検証：もっと使おうPhoneGap／Cordova 2.0.0｜gihyo.jp … 技術評論社
- #大学生活が終わる前にはじめるブログ: スマートフォンのリモートデバッグ
以上、簡単に各リモートデバッグについて紹介した。肝心のデバッガの機能については紹介していないので、「参照」として紹介したリンク先を読んで欲しい。
