path: root/files/ja/tools/remote_debugging/firefox_for_android/index.html

---
title: Android 版 Firefox のリモートデバッグ
slug: Tools/Remote_Debugging/Firefox_for_Android
translation_of: Tools/Remote_Debugging/Firefox_for_Android
---
<div>{{ToolsSidebar}}</div><p>このガイドでは、<a href="/ja/docs/Mozilla/Firefox_for_Android">Android 版 Firefox</a> で実行しているコードを USB 経由で調査あるいはデバッグするために、<a href="/docs/Tools/Remote_Debugging">リモートデバッグ</a>を使用する方法を説明します。</p>

<div class="note">
<p>最近、Android 版 Firefox に開発ツールを接続する方法を大幅にシンプル化しました。デスクトップ版 の Firefox 36 以降および Android 版の Firefox 35 以降を使用している場合は、本記事の代わりに<a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">新しい方法をご確認ください</a>。</p>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

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

<h2 id="Prerequisites" name="Prerequisites">事前準備</h2>

<p>まず、以下のものが必要です:</p>

<ul>
 <li>Firefox 15 以降を実行するデスクトップまたはノート型コンピュータ</li>
 <li>Android 版 Firefox 15 以降を実行している、<a href="https://support.mozilla.org/ja/kb/will-firefox-work-my-mobile-device">Android 版 Firefox が動作する</a> Android デバイス</li>
 <li>2 つのデバイスを接続する USB ケーブル</li>
</ul>

<h3 id="ADB_setup" name="ADB_setup">ADB のセットアップ</h3>

<p>次に <a href="https://developer.android.com/tools/help/adb.html">adb</a> コマンドラインツールを使用して、デスクトップと Android デバイスが相互に対話できるようにしなければなりません。</p>

<h4 class="note" id="Android_デバイスで行う作業">Android デバイスで行う作業</h4>

<ul>
 <li><a href="http://developer.android.com/guide/developing/device.html#setting-up">USB デバッグの有効化 (このリンクのステップ 2 のみ実施)</a>。</li>
 <li>USB 経由で Android デバイスとデスクトップを接続します。</li>
</ul>

<h4 class="note" id="デスクトップで行う作業">デスクトップで行う作業</h4>

<ul>
 <li>デバイスに合うバージョンの <a href="http://developer.android.com/sdk/index.html">Android SDK</a> をインストールします。</li>
 <li>Android SDK を使用して、<a href="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a> をインストールします。</li>
 <li>Android Platform Tools が、Android SDK をインストールしたディレクトリ配下の "platform-tools" ディレクトリ内に、adb をインストールします。"platform-tools" ディレクトリにパスを通すようにしてください。</li>
</ul>

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

<pre>adb devices</pre>

<p>以下のように出力するでしょう:</p>

<pre>List of devices attached
51800F220F01564 device
</pre>

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

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

<h3 id="Enable_remote_debugging" name="Enable_remote_debugging">リモートデバッグの有効化</h3>

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

<h4 id="Firefox_for_Android_24_and_earlier" name="Firefox_for_Android_24_and_earlier">Android 版 24 以前</h4>

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

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h4 class="note" id="Android_版_Firefox_25_以降">Android 版 Firefox 25 以降</h4>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

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

<h4 id="On_the_desktop_2" name="On_the_desktop_2">デスクトップで行う作業</h4>

<p>デスクトップでは、ツールボックスの設定でリモートデバッグを有効化します。<a href="/ja/docs/Tools_Toolbox" title="Tools_Toolbox">ツールボックスを開いて</a>、<a href="/ja/docs/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールバー</a>内の "オプション" ボタンをクリックします。そして<a href="/ja/docs/Tools_Toolbox#Settings" title="Tools_Toolbox#Settings">設定</a>タブで "リモートデバッガを有効" にチェックを入れてください:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<div class="note">バージョン 27 より前の Firefox を使用している場合は、設定を反映するためにブラウザの再起動が必要です。</div>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Connecting" name="Connecting">接続</h2>

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

<h4 class="note" id="デスクトップで行う作業_2">デスクトップで行う作業</h4>

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

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

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

<ul>
 <li>Beta は <code>org.mozilla.firefox_beta</code></li>
 <li>Aurora は <code>org.mozilla.fennec_aurora</code></li>
 <li>Nightly は <code>org.mozilla.fennec</code></li>
</ul>

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

<pre>adb forward tcp:6000 tcp:6000</pre>

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

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

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

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

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">ポート番号を変更した場合を除き、6000 を選択して "接続" ボタンを押下してください。</p>

<h4 class="note" id="Android_デバイスで行う作業_2">Android デバイスで行う作業</h4>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">"OK" を押下してください。デスクトップ側は、このダイアログを許可するまで数秒待ちます: タイムアウトしたときは、デスクトップ側のダイアログで再度 "接続" を押下してください。</p>

<h4 class="note" id="デスクトップで行う作業_3">デスクトップで行う作業</h4>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">これは、ブラウザタブで実行している Web コンテンツのデバッグを行いたいか、あるいはブラウザコード自体のデバッグを行うかを問い合わせるものです。</p>

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

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>ツールボックスやツールボックス内のツールは、ローカルのコンテンツに接続した場合と同様に動作します。<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>