Firefox for Android をリモートデバッグ

Android 版の Firefox 14 以降にはリモートデバッガ機能がサポートされており、PC 版の Firefox 15 以降と組み合わせることでモバイル Web サイトをリモートデバッグできるようになっています。リモートでバッグをするまでの手順を簡単に説明しますので、興味のある方は是非お試しください。

デバッグ環境の準備

Android 端末に Firefox 14 または Firefox 15 Beta をインストールし、Android の設定で USB デバッグを有効にしてください。Android 2.x であれば Android 設定 → アプリケーション設定 → 開発 → USB デバッグで設定できます。

PC 側では Android SDK および Firefox 15 Beta 以降をインストールしてください。Android SDK を使うには、Windows であれば端末に応じた デバイスドライバが必要になることや、~/.android//adb_usb.ini ファイルにサードパーティベンダー ID の記載が必要なことがあります (本来は manifest.ini を書くべきだという話もあります)。

SDK のインストールができたら、USB 接続して次のコマンドで Android 端末を認識できているか確認してください。

adb devices

接続した端末が表示されるようになれば準備は完了です。

リモートデバッガの接続手順

リモートデバッガを有効化

Android と PC 両方の Firefox でそれぞれ about:config ページを開いてください。ページ上部の検索バーに “debugger” と入力して絞り込み、devtools.debugger.remote-enabled という真偽値の設定を見つけ、true に切り替え、Firefox を再起動してください。

Android 端末を USB 接続し、次のコマンドで端末側のポートと PC 側のポートを中継させてください。

adb forward tcp:6000 tcp:6000

あとはデバッグしたりソースを確認したいページを Android 版の Firefox で開き、PC 版の Firefox で「開発者メニュー」 → 「リモートデバッガ」を選択してください。接続するホスト名とポート番号を入力するように求められますが、remote.debugger.port などの設定を変えたりしない限り、デフォルトの 「http://localhost:6000/」 で問題ありません。

接続できたらリモートデバッガウィンドウにソースが読み込まれるので、いつも通りファイルを選択、ブレークポイントを設定し、デバッグしてください。ステップ実行、コールスタックの確認、各タックでの変数の確認、変数の書き換えなど基本的なデバッグ機能は揃っています。

モバイル Web アプリをデバッグ


ブレークポイントを設定

なお、現時点の Android 版 Firefox 16 Aurora および Firefox 17 Nightly にはバグがありリモートデバッグできません(PC 版は問題ありません)。いずれ修正されますが、それまでは安定動作するバージョンでテストしてください。

Enjoy Remote Debugging!

2 件のコメント

  1. Gomita :

    「端末によっては」で文章が途切れています。

    1. dynamis :

      おぉぉ。またミスった。修正しました&ご指摘感謝。