blob: adfd3563fb4110f1691ffb8bbf2c714fc5138899 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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>
|