Android 版 Firefox のリモートデバッグ

このガイドでは、Android 版 Firefox で実行しているコードを USB 経由で調査あるいはデバッグするために、リモートデバッグを使用する方法を説明します。

本ガイドは 2 つのパートに分けています: パート 1 "事前準備" では 1 回だけ行う必要がある作業を、パート 2 "接続" ではデバイスへ接続するたびに行う必要がある作業を扱います。

事前準備

まず、以下のものが必要です:

• Firefox 15 以降を実行するデスクトップまたはノート型コンピュータ
• Android 版 Firefox 15 以降を実行している、Android 版 Firefox が動作する Android デバイス
• 2 つのデバイスを接続する USB ケーブル

ADB のセットアップ

次に adb コマンドラインツールを使用して、デスクトップと Android デバイスが相互に対話できるようにしなければなりません。

Android デバイスで行う作業

• USB デバッグの有効化 (このリンクのステップ 2 のみ実施)。
• USB 経由で Android デバイスとデスクトップを接続します。

デスクトップで行う作業

• デバイスに合うバージョンの Android SDK をインストールします。
• Android SDK を使用して、Android Platform Tools をインストールします。
• Android Platform Tools が、Android SDK をインストールしたディレクトリ配下の "platform-tools" ディレクトリ内に、adb をインストールします。"platform-tools" ディレクトリにパスを通すようにしてください。

動作確認を行うには、デスクトップでコマンドシェルを開いて以下のコマンドを入力してください:

adb devices

以下のように出力するでしょう:

List of devices attached
51800F220F01564 device

(長い 16 進文字列は異なります。)

これで adb があなたのデバイスを発見できており、また ADB の設定が成功しました。

リモートデバッグの有効化

次に、Android デバイスとデスクトップの双方でリモートデバッグを有効にしなければなりません。

Android 版 24 以前

デバイスでリモートデバッグを有効にするには、設定項目 devtools.debugger.remote-enabled を true にしなければなりません。

Android 版 Firefox で about:config を開いて、検索ボックスに "devtools" と入力して検索キーを押下してください。すると、開発ツール関連の全設定が表示されます。設定 devtools.debugger.remote-enabled を探して、"切り替え" を押下してください。

Android 版 Firefox 25 以降

Android 版 Firefox 25 以降では、リモートデバッグを有効化するメニュー項目があります。メニューを開き "設定" を選択して、"デベロッパーツール" (一部の Android デバイスでは、"設定" を表示するために "More" を選択しなければならないでしょう) を選択してください。"リモートデバッグ" チェックボックスにチェックを入れてください:

ブラウザが、ポートフォワーディングの設定を忘れないようにという通知を表示します。これは後で行います。

デスクトップで行う作業

デスクトップでは、ツールボックスの設定でリモートデバッグを有効化します。ツールボックスを開いて、ツールバー内の "オプション" ボタンをクリックします。そして設定タブで "リモートデバッガを有効" にチェックを入れてください:

Web 開発メニュー配下に、新たな項目 "接続..." が現れます:

接続

以上で、デバイスにリモートデバッグツールを接続できます。始めに、デバイスとデスクトップを接続していない場合は、デバイスとデスクトップを USB ケーブルで接続してください。

デスクトップで行う作業

Android 版 Firefox 35 以降では、コマンドプロンプトを開いて以下のように入力します:

adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket

リリース版以外のチャンネルの Android 版 Firefox を使用する場合は、org.mozilla.firefox の部分を以下のように変更してください:

• Beta は org.mozilla.firefox_beta
• Aurora は org.mozilla.fennec_aurora
• Nightly は org.mozilla.fennec

Android 版 Firefox 34 以前では以下のように入力します:

adb forward tcp:6000 tcp:6000

(Android デバイスが使用するデバッグ用ポートの値を変更した場合は、このコマンドも適宜変更しなければなりません。)

Firefox OS では以下のコマンドを入力します:

adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

デスクトップとデバイスを USB ケーブルで物理的に接続するたびに、このコマンドを実行しなければなりません。

そして Firefox で Web 開発メニューを開いて、"接続..." を選択してください。以下のようなページが表示されるでしょう:

ポート番号を変更した場合を除き、6000 を選択して "接続" ボタンを押下してください。

Android デバイスで行う作業

続いて、Android デバイスで接続の確認を問い合わせるダイアログが表示されます:

"OK" を押下してください。デスクトップ側は、このダイアログを許可するまで数秒待ちます: タイムアウトしたときは、デスクトップ側のダイアログで再度 "接続" を押下してください。

デスクトップで行う作業

続いて、デスクトップ側で以下のようなダイアログが表示が表示されます:

これは、ブラウザタブで実行している Web コンテンツのデバッグを行いたいか、あるいはブラウザコード自体のデバッグを行うかを問い合わせるものです。

• "利用可能なリモートのタブ" 配下は開いているタブごとに 1 つずつ項目があり、その項目をクリックすると当該タブで開いている Web コンテンツにデバッグツールを接続します。Web コンテンツのデバッグを行いたい場合は、適切なコンテンツタブを選択してください。
• "利用可能なリモートのプロセス" 配下はエントリが 1 つあります: これはブラウザのプロセスそのものです。ブラウザ自身のコードのデバッグを行いたい場合は、この項目を選択してください。

mozilla.org の Web サイトに接続してみましょう。ツールボックスが独自のウィンドウで開いて、mozilla.org を開いている Android 版 Firefox のタブに接続します:

ツールボックスやツールボックス内のツールは、ローカルのコンテンツに接続した場合と同様に動作します。