MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

WebIDE で Android 版 Firefox のデバッグを行う

この記事では、Firefox 36 以降で Firefox の開発ツール を Android 版 Firefox に接続する方法を説明します。Wi-Fi 経由で接続する方法については、こちらのページ をご覧ください。

Firefox の開発ツールを Android 版 Firefox に接続し、モバイルウェブサイトをデバッグすることは、かなり前から可能でした。しかし今まで、これはかなり複雑でエラーが発生しやすい方法によるものでした。Firefox 36 より、この方法をよりシンプルにしました。特に、adb ツールを直接扱う必要がなくなりました。これからは WebIDE を使用して接続することになり、WebIDE が裏で adb の設定を行います。

この機能を動作させるにはデスクトップ側で Firefox 36 以降、モバイルデバイス側で Firefox 35 以降が必要です。前のバージョンを使用しなければならない場合は、従来の手順である Android 版 Firefox のリモートデバッグ をご覧ください。

WebIDE のプロジェクト管理とインストールの機能は使用できません。現在、これらは Firefox OS デバイスでのみ動作します。Android デバイスでは、すでにブラウザーに読み込まれている既存のウェブサイトに限りデバッグできます。

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

事前準備

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

  • Firefox 36 以降を実行するデスクトップまたはノート型コンピューター
  • Android 版 Firefox 35 以降を実行する、Android 版 Firefox 対応 の Android デバイス
  • 2 つのデバイスを接続する USB ケーブル

ADB Helper

デスクトップ版 Firefox では、バージョン 0.7.1 以降の ADB Helper アドオンも必要です。これは初めて WebIDE を開いたときに、自動的にインストールされます。ブラウザーのアドレスバーに about:addons と入力すると、ADB のバージョンを確認できます。

ADB Helper のバージョンが 0.7.1 以降ではない場合は [プロジェクト] メニューで [追加のコンポーネントを管理] を選択すると、ADB Helper を含む "追加のコンポーネント" ウィンドウが開きます:

"アンインストール"、"インストール" の順にクリックすると、最新バージョンがインストールされます。

Android デバイスの設定

始めに こちらのページのステップ 2 および 3 のみ実行して、USB デバッグを有効にしてください。

次に、Android 版 Firefox でリモートデバッグを有効にしてください。ブラウザーを起動してメニューを開き、[設定] を選択します (一部の Android デバイスでは、[設定] を表示するために [More] を選択しなければならないかもしれません)。以降の手順はブラウザーのバージョンにより異なります:

  • バージョン 36 から 41: "デベロッパーツール" を選択して、"リモートデバッグ" にチェックを入れます。

How to enable remote debugging on Firefox on Android v36-41

  • バージョン 42 から 44: "デベロッパーツール" を選択して、"USB 経由でリモートデバッグをおこなう" にチェックを入れます。

How to enable remote debugging on Firefox on Android v42-44

  • バージョン 45 以降: "高度な設定" を選択して、"USB 経由でリモートデバッグをおこなう" にチェックを入れます。

How to enable remote debugging on Firefox on Android v45 or later

接続

USB ケーブルでデバイスとコンピューターを接続すると、WebIDE が起動します。"USB デバイス" の配下にある、デバッグ対象の "Android 版 Firefox" を選択してください:

Android デバイス側に警告メッセージが表示されます。バージョンに応じて "OK" または "許可" をクリックしてください:

Incoming connection warning v36-41

Incoming connection warning v42 or later

そして、WebIDE で [アプリを開く] をクリックしてください。ここには、デバイスで開いているすべてのタブを表示します:

開発ツールを接続したいタブを選択してください:

これで、リモートデバッグをサポートするすべての開発ツールを使用できます。詳しくは リモートデバッグの ページをご覧ください。

セキュリティ上の理由により、作業が完了したら 前述の手順 で変更した設定を戻して、Android の USB デバッグと Firefox のリモートデバッグを無効化してください。

トラブルシューティング

作業中にトラブルが発生した場合は、もう一度確認する項目や問い合わせ可能なサポートフォーラムについて、トラブルシューティング のページをご覧ください。

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss, Rockridge
 最終更新者: yyss,