diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/tools/remote_debugging | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/tools/remote_debugging')
6 files changed, 409 insertions, 0 deletions
diff --git a/files/ja/tools/remote_debugging/chrome_desktop/index.html b/files/ja/tools/remote_debugging/chrome_desktop/index.html new file mode 100644 index 0000000000..6289a985ba --- /dev/null +++ b/files/ja/tools/remote_debugging/chrome_desktop/index.html @@ -0,0 +1,48 @@ +--- +title: デスクトップ版 Chrome のリモートデバッグ +slug: Tools/Remote_Debugging/Chrome_Desktop +translation_of: Tools/Remote_Debugging/Chrome_Desktop +--- +<div>{{ToolsSidebar}}</div><p>デスクトップ環境で実行している <a href="/ja/docs/Glossary/Google_Chrome">Google Chrome</a> に <a href="/ja/docs/Tools">Firefox 開発ツール</a>を接続する方法を説明します。</p> + +<div class="note"> +<p>本機能のサポート状況は、Firefox のデバッグプロトコルと Chrome のデバッグプロトコルの橋渡しを行う Valence アドオンに依存します。Valence のサポート状況は、まだ初期段階です。</p> +</div> + +<p>本ガイドは 2 つのパートに分けています: パート 1 "事前準備" では 1 回だけ必要な作業を、パート 2 "接続" ではデバイスへ接続するたびに必要な作業を扱います。</p> + +<h2 id="Prerequisites" name="Prerequisites">事前準備</h2> + +<p>以下のものが必要です:</p> + +<ul> + <li><a href="/ja/docs/Tools/Valence">Valence</a> アドオン (旧 Firefox ツールアダプタ) をインストールした、Firefox 35 以降。<a href="/ja/Firefox/Developer_Edition">Firefox Developer Edition</a> を使用している場合は、Valence はインストール済みです。他のエディションでは、<a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxdt-adapters/">最新バージョンの Valence をダウンロード</a>して、XPI ファイルを Firefox で開いてインストールしてください。</li> + <li>Chrome バージョン 37 以降。</li> +</ul> + +<h2 id="Connecting" name="Connecting">接続</h2> + +<p>{{EmbedYouTube("g5p9__OiaMY")}}</p> + +<h3 id="Running_Chrome" name="Running_Chrome">Chrome を実行する</h3> + +<p>デスクトップ版 を以下の特別なフラグ付きで起動して、リモートデバッグを有効にします。重要なフラグは <code>--remote-debugging-port=9222</code> です。<a class="external external-icon" href="http://www.chromium.org/developers/how-tos/run-chromium-with-flags">これらのフラグ付きで Chrome プロセスを実行する方法</a>のガイドをご覧ください。</p> + +<p>他にもいくつか便利かもしれないフラグがあります。<code>--no-first-run</code>、<code>--no-default-browser-check</code>、<code>--user-data-dir</code> 付きで実行すれば、他の Chrome プロファイルと同時に実行できます。</p> + +<p>例えば OS X では以下のコマンドを実行すると、他のインスタンスとは分離されたかたちで、デバッグ可能な Chrome を起動できます:</p> + +<pre class="language-html"><code class="language-html">/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')</code></pre> + +<h3 id="Connecting_using_WebIDE" name="Connecting_using_WebIDE">WebIDE を使用して接続する</h3> + +<p>Firefox で <a href="/ja/docs/Tools/WebIDE#Opening_WebIDE">WebIDE</a>を開きます。WebIDE で "ランタイムを選択" をクリックして、ドロップダウンメニューから "Chrome Desktop" を選択してください。</p> + +<p>そして、WebIDE で "アプリを開く" をクリックしてください。ここに、デバイスで開いているすべてのタブを表示します。タブ名をクリックすると、そのタブに開発ツールを接続します。ほとんどの Firefox 開発ツールを使用できます。ただし、以下のツールは未サポートです:</p> + +<ul> + <li><a href="/ja/docs/Tools/Performance">パフォーマンス</a></li> + <li>タイムライン</li> + <li><a href="/ja/docs/Tools/Network_Monitor">ネットワーク</a></li> + <li><a href="/ja/docs/Tools/Storage_Inspector">ストレージ</a></li> +</ul> diff --git a/files/ja/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/ja/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..adfd3563fb --- /dev/null +++ b/files/ja/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,82 @@ +--- +title: デスクトップ版 Firefox のデバッグを行う +slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +<div>{{ToolsSidebar}}</div><p>このガイドでは、同じマシン上の別のインスタンスとして実行しているデスクトップ版 Firefox に、Firefox 開発ツールを接続する方法を説明します。ここでは、デバッグされる Firefox のインスタンスを<em>デバッグ先</em>、デバッグを行う Firefox のインスタンスを<em>デバッグ元</em>と呼びます。</p> + +<h2 id="Enable_remote_debugging" name="Enable_remote_debugging">リモートデバッグを有効化する</h2> + +<p>始めにデバッグ元とデバッグ先の <a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション</a> で、"ブラウザーとアドオンのデバッガーを有効" および "リモートデバッガーを有効" を有効にしなければなりません。</p> + +<p>この作業は 1 回だけ必要です。設定値は再起動後も維持されます。</p> + +<h2 id="Start_the_debugger_server" name="Start_the_debugger_server">デバッガーサーバを開始する</h2> + +<p>次に、デバッグ先でデバッガーサーバーを開始します。</p> + +<h3 id="Before_Firefox_37" name="Before_Firefox_37">Firefox 37 より前のバージョン</h3> + +<p>Firefox 37 より前のバージョンでは、<a href="/ja/docs/Tools/GCLI">開発ツールバー</a> を開いて以下のコマンドを実行します:</p> + +<pre>listen 6000</pre> + +<p>このコマンドは、ポート 6000 番でデバッガークライアントの接続を待ち受けするよう、デバッグ先に指示します。6000 番以外も使用できます。</p> + +<p>デバッグ先を再起動した場合は、再度コマンドを実行しなければなりません。</p> + +<h3 id="Firefox_37_onwards" name="Firefox_37_onwards">Firefox 37 以降のバージョン</h3> + +<p>Firefox 37 以降でも前出の方法を使用できますが、もうひとつ方法があります。<code>--start-debugger-server</code> オプションを渡して、コマンドラインからデバッグ先を起動します:</p> + +<pre>/path/to/firefox --start-debugger-server</pre> + +<p>引数を渡さない場合、--start-debugger-server はデバッガーサーバーをポート 6000 番で待ち受けさせます。別のポートを使用する場合は、希望するポート番号を渡します:</p> + +<pre>/path/to/firefox --start-debugger-server 1234</pre> + +<p>注記: Windows では、<code>start-debugger-server</code> をハイフン 1 個で呼び出します:</p> + +<pre>firefox.exe -start-debugger-server 1234</pre> + +<div class="note"> +<p><strong>注記</strong>: デフォルトではセキュリティ上の理由で、<code>devtools.debugger.force-local</code> を設定しています。外部のマシンから Firefox インスタンスのデバッグを行いたい場合はこの設定を変更してもかまいませんが、信頼済みのネットワークまたはどのマシンがアクセスできるかを厳しく制御するファイアウォール規則が設定された環境でのみ行ってください。</p> +</div> + +<h2 id="Connect" name="Connect">接続</h2> + +<p>接続方法は 2 種類あります。接続画面を使用する方法と、WebIDE を使用する方法です。</p> + +<h3 id="Connect_screen" name="Connect_screen">接続画面</h3> + +<p>デバッグ元のツール/ウェブ開発メニュー配下に、[接続...] という項目があります。この項目をクリックすると、以下のようなページが開きます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10063/remote-connect-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 640px;"></p> + +<p>デバッグ先に待ち受けさせているポート番号を入力して、"接続" をクリックします。すると、デバッグ先で接続確認を求めるダイアログが表示されるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10073/remote-warning.png" style="display: block; height: 193px; margin-left: auto; margin-right: auto; width: 502px;">"OK" をクリックしてデバッグ元に戻ると、以下のようなページが表示されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10065/remote-connect-2.png" style="display: block; margin-left: auto; margin-right: auto; width: 640px;"></p> + +<ul> + <li>"利用可能なリモートのタブ" に、デバッグ先で開いているすべてのタブを表示します。タブ名をクリックすると、そのタブに開発ツールを接続します。</li> + <li>"利用可能なリモートのアドオン" に、デバッグ先にインストールしているすべてのアドオンを表示します。アドオン名をクリックすると、そのアドオンに開発ツールを接続します。</li> + <li>"利用可能なリモートのプロセス" に、Firefox のプロセスを表示します。"メインプロセス" をクリックすると、ブラウザー自体に開発ツールを接続します。</li> +</ul> + +<h3 id="WebIDE" name="WebIDE">WebIDE</h3> + +<p>デバッグ元で WebIDE を開くと、"ランタイムを選択" の中に "リモートランタイム" があります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10069/remote-webide-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 786px;">リモートランタイムを選択すると、ホスト名とポート番号を求められます。"localhost:6000"、またはデバッグ先で別のポート番号で待ち受けさせている場合はポート番号を指定します。</p> + +<p>すると、警告ダイアログを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10073/remote-warning.png" style="display: block; height: 193px; margin-left: auto; margin-right: auto; width: 502px;">OK をクリックします。WebIDE が、メインプロセスに開発ツールを接続します。content タブに接続したい場合は、左側のメニューを開いてデバッグを行いたいタブを選択してください。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10071/remote-webide-2.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 786px;"></p> diff --git a/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html new file mode 100644 index 0000000000..a2f726cd33 --- /dev/null +++ b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html @@ -0,0 +1,68 @@ +--- +title: WebIDE を使用した Firefox for Android のデバッグ +slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +tags: + - ガイド + - ツール + - デバッグ +translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +<div>{{ToolsSidebar}}</div> + +<p>この記事では、<a href="/ja/docs/Tools">Firefox開発ツール</a>を Firefox 36 以降の Android 用 Firefox に接続する方法について説明します。</p> + +<p>長い間、Firefox Developer Tools を Android 用 Firefox に接続してモバイル Web サイトをデバッグすることは可能でした。これまでは、かなり複雑でエラーが発生しやすいプロセスでした。Firefox 36 では、このプロセスをもっと簡単にしました。特に、adb ツールをまったく直接処理する必要はありません。これで WebIDE を使用して接続します。これは舞台裏での adb の設定を担当します。</p> + +<div class="note"> +<p>これを行うには、デスクトップに Firefox 36 以上、モバイルデバイスに Firefox 35 が必要です。以前のバージョンを使用する必要がある場合は、<a href="/ja/docs/Tools/Remote_Debugging/Firefox_for_Android">デベロッパーツールを Android 用 Firefox に接続する</a>ための古い手順を参照してください。</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9011/remote-debugging-overview-fx36.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>このガイドは2つの部分に分かれています。最初の部分「前提条件」は、1回だけ行う必要のあるものをカバーし、2番目の部分の「接続する」は、デバイスを接続するたびに行う必要がある作業をカバーします。</p> + +<h2 id="前提条件">前提条件</h2> + +<p>まず、次のものが必要です。</p> + +<ul> + <li>Firefox 36 以降が動作するデスクトップまたはラップトップコンピュータ</li> + <li>Android 35 以上の Android 用 Firefox を搭載した <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_ヘルパー">ADB ヘルパー</h3> + +<p>デスクトップ上の Firefox には、ADB ヘルパーアドオンのバージョン 0.7.1 以上が必要です。これは、初めて WebIDE を開くときに自動的にインストールされます。バージョンを確認するには、ブラウザのアドレスバーに <code>about:addons</code> と入力すると、ADB が表示されます。</p> + +<p>ADB ヘルパーのバージョンが 0.7.1 以上でない場合は、「Projects」メニューから「Extra Components を管理」を選択すると、「Extra Components」ウィンドウが表示されます。このウィンドウには ADB ヘルパーのエントリが含まれています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9021/extra-components.png" style="display: block; margin-left: auto; margin-right: auto;">「アンインストール」をクリックし、「インストール」をクリックすると、最新のバージョンになります。</p> + +<h3 id="Android_端末のセットアップ">Android 端末のセットアップ</h3> + +<p>まず、<a href="http://developer.android.com/guide/developing/device.html#setting-up">このリンクの手順 2 と 3 を実行して</a>、USB デバッグを有効にします。</p> + +<p>次に Firefox for Android でリモートデバッグを有効にします。ブラウザを開き、メニューを開き、[設定]、[デベロッパーツール] を選択します (一部の Android 搭載端末では、[詳細] を選択して [設定] オプションを表示する必要があります)。[リモートデバッグ] チェックボックスをオンにします。</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> + +<h2 id="接続する">接続する</h2> + +<p>Android 端末を USB ケーブルでデスクトップに接続し、WebIDE を開き、「ランタイム」メニューを開きます。「USBデバイス」の下に Android 用 Firefox がデバッグ対象として表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9013/remote-debugging-android-runtime.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>それを選択してください。Android 搭載端末では警告メッセージが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9031/incoming-warning.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>[OK] をクリックします。WebIDE の「アプリケーションを開く」メニューをクリックします。デバイス上に開いているすべてのタブのリストが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9015/remote-debugging-android-open-tabs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>開発ツールを添付するタブを選択する:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9029/remote-debugging-android-attached.png" style="display: block; margin-left: auto; margin-right: auto;">これでリモートデバッグをサポートするすべての Firefox 開発ツールを使用できるようになります。詳細については<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a>のページを参照してください。</p> diff --git a/files/ja/tools/remote_debugging/firefox_for_android/index.html b/files/ja/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..af3bdfbb64 --- /dev/null +++ b/files/ja/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,146 @@ +--- +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" title="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" title="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" title="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" title="http://developer.android.com/sdk/index.html">Android SDK</a> をインストールします。</li> + <li>Android SDK を使用して、<a href="http://developer.android.com/sdk/installing.html#components" title="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> diff --git a/files/ja/tools/remote_debugging/index.html b/files/ja/tools/remote_debugging/index.html new file mode 100644 index 0000000000..d922cf39b0 --- /dev/null +++ b/files/ja/tools/remote_debugging/index.html @@ -0,0 +1,21 @@ +--- +title: リモートデバッグ +slug: Tools/Remote_Debugging +tags: + - Tools + - 'l10n:priority' +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div> + +<p>デスクトップ版の <a href="/ja/docs/Tools">Firefox の開発ツール</a> を使用すると、別のブラウザーやランタイムで実行しているウェブサイトやウェブアプリをデバッグできます。別のブラウザーとはツールと同じ端末上のものであったり、 USB で接続した電話機など別の端末上のものを使用したりすることができます。</p> + +<p>開発ツールの詳細な接続手順は、ランタイムにより異なります。</p> + +<p>開発ツールと接続できるのは、デスクトップ版 Firefox、Android 版 Firefox、Thunderbird などの Gecko ベースのランタイムです。</p> + +<ul> + <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">デスクトップ版 Firefox</a></li> + <li>Android 版 Firefox を<a href="/docs/Tools/about:debugging">USB 経由</a>で</li> + <li><a href="/ja/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li> +</ul> diff --git a/files/ja/tools/remote_debugging/thunderbird/index.html b/files/ja/tools/remote_debugging/thunderbird/index.html new file mode 100644 index 0000000000..0f05609669 --- /dev/null +++ b/files/ja/tools/remote_debugging/thunderbird/index.html @@ -0,0 +1,44 @@ +--- +title: Thunderbird のリモートデバッグ +slug: Tools/Remote_Debugging/Thunderbird +tags: + - Debug + - Tutorial + - thunderbird +translation_of: Tools/Remote_Debugging/Thunderbird +--- +<div>{{ToolsSidebar}}</div><p>このガイドでは、<a href="/ja/docs/Mozilla/Thunderbird">Thunderbird</a> で実行しているコードの調査やデバッグを <a href="/ja/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">リモートデバッグ</a> する方法を説明します。</p> + +<p>Firefox のリモート接続機能を使用して、さまざまな開発ツールが Thunderbird をサポートします。現在サポートしているツールセットはウェブコンソール、インスペクター、デバッガー、スタイルエディター、プロファイラー、ネットワークモニターです。他のツールは、将来利用可能になる予定です。</p> + +<h2 id="Setting_up_Thunderbird" name="Setting_up_Thunderbird">Thunderbird の設定</h2> + +<p>Thunderbird では、デバッガーサーバーを有効にすることが必要です。メニューバーの [<code>ツール</code>] メニュー (alt + ツール) で [<code>リモートデバッグを許可</code>] を選択してください。デフォルトでは、デバッガーサーバーがポート 6000 番を使用して開始します。複数のプロファイルをデバッグするなど、デバッガーサーバーのポート番号を変更したい場合は、高度な設定のエディターを開いて設定項目 <code>devtools.debugger.remote-port</code> を変更してください。</p> + +<h2 id="Setting_up_Firefox" name="Setting_up_Firefox">Firefox の設定</h2> + +<p>Firefox はクライアントとして動作して、Thunderbird 用の開発ツールを操作するユーザーインターフェイスを提供します。Firefox と Thunderbird のメジャーバージョン番号を合わせるともっともよいのですが、異なるバージョンでも動作する場合があります。</p> + +<p>Firefox の設定として、ツールボックスのオプションでリモートデバッグを有効にします。<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"></p> + +<p>以上で、Firefox のツールメニューから接続ページを開くことができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="height: 503px; width: 583px;"></p> + +<p>ブラウザーで接続ページが開きます。必要に応じてこのページをブックマークツールバーに追加できます。リモートポート番号を変更していなければ、フィールドにはすでに適切な値が入っています。接続ボタンをクリックすると、開発ツールのリモート接続を開始します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="height: 686px; width: 732px;"></p> + +<p>接続すると、リモートのタブやプロセスの一覧が提示されます。Thunderbird と Firefox ではタブの概念が異なっており、リモートのタブの一覧に Thunderbird のすべての xul:browser 要素を表示します。これはコンテンツタブまたはメッセージリーダーになります。ほとんどの場合、Thunderbird 自体のコードをデバッグするために "メインプロセス" を選択するでしょう。開発ツールのセットを含む新しいウィンドウが開いて、Thunderbird のインスタンスに対して使用できます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png"></p> + +<h2 id="Using_the_Developer_Tools" name="Using_the_Developer_Tools">開発ツールを使用する</h2> + +<p>ツールの使用方法は、ほぼ一目瞭然でしょう。なんらかのツールで問題が発生した場合は、<a href="/ja/docs/Tools/Remote_Debugging">開発ツールのドキュメント</a> をご覧ください。リモート接続を使用するため、若干の差異が発生する可能性があります。一部のツールは使用できず、またローカルと同等のパフォーマンスを実現できない可能性もあります。例えばリモートデバッガーツールを使用すると、内部のネットワーク接続を使用してファイルを転送しなければならないため、かなり時間がかかります。</p> + +<h2 id="Troubleshooting" name="Troubleshooting">トラブルシューティング</h2> + +<p>エラーが発生した場合は、まずはバージョン番号が一致しているかを確認してください。Thunderbird 24 を使用している場合は、Firefox もバージョン 24 を使用して接続してください。次に、Firefox の開発ツールの問題であるか、あるいは Thunderbird のリモート接続機能の問題であるかを明らかにすることが重要です。これを確認するには、Firefox だけを使用して問題が再現するかを試してください。例えばインスペクターツールで属性の値を設定できない場合は、Firefox のブラウザーデバッガーで属性の値を変更してみてください。ブラウザーデバッガーで再現しない場合は、Thunderbird のバグとして報告してください。再現する場合は、Firefox/開発ツールのバグとして報告してください。</p> |