From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../remote_debugging/chrome_desktop/index.html | 48 +++++++ .../debugging_firefox_desktop/index.html | 82 ++++++++++++ .../index.html | 68 ++++++++++ .../firefox_for_android/index.html | 146 +++++++++++++++++++++ files/ja/tools/remote_debugging/index.html | 21 +++ .../tools/remote_debugging/thunderbird/index.html | 44 +++++++ 6 files changed, 409 insertions(+) create mode 100644 files/ja/tools/remote_debugging/chrome_desktop/index.html create mode 100644 files/ja/tools/remote_debugging/debugging_firefox_desktop/index.html create mode 100644 files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html create mode 100644 files/ja/tools/remote_debugging/firefox_for_android/index.html create mode 100644 files/ja/tools/remote_debugging/index.html create mode 100644 files/ja/tools/remote_debugging/thunderbird/index.html (limited to 'files/ja/tools/remote_debugging') 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 +--- +
{{ToolsSidebar}}

デスクトップ環境で実行している Google Chrome に Firefox 開発ツールを接続する方法を説明します。

+ +
+

本機能のサポート状況は、Firefox のデバッグプロトコルと Chrome のデバッグプロトコルの橋渡しを行う Valence アドオンに依存します。Valence のサポート状況は、まだ初期段階です。

+
+ +

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

+ +

事前準備

+ +

以下のものが必要です:

+ + + +

接続

+ +

{{EmbedYouTube("g5p9__OiaMY")}}

+ +

Chrome を実行する

+ +

デスクトップ版 を以下の特別なフラグ付きで起動して、リモートデバッグを有効にします。重要なフラグは --remote-debugging-port=9222 です。これらのフラグ付きで Chrome プロセスを実行する方法のガイドをご覧ください。

+ +

他にもいくつか便利かもしれないフラグがあります。--no-first-run、--no-default-browser-check、--user-data-dir 付きで実行すれば、他の Chrome プロファイルと同時に実行できます。

+ +

例えば OS X では以下のコマンドを実行すると、他のインスタンスとは分離されたかたちで、デバッグ可能な Chrome を起動できます:

+ +
/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')
+ +

WebIDE を使用して接続する

+ +

Firefox で WebIDEを開きます。WebIDE で "ランタイムを選択" をクリックして、ドロップダウンメニューから "Chrome Desktop" を選択してください。

+ +

そして、WebIDE で "アプリを開く" をクリックしてください。ここに、デバイスで開いているすべてのタブを表示します。タブ名をクリックすると、そのタブに開発ツールを接続します。ほとんどの Firefox 開発ツールを使用できます。ただし、以下のツールは未サポートです:

+ + 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 +--- +
{{ToolsSidebar}}

このガイドでは、同じマシン上の別のインスタンスとして実行しているデスクトップ版 Firefox に、Firefox 開発ツールを接続する方法を説明します。ここでは、デバッグされる Firefox のインスタンスをデバッグ先、デバッグを行う Firefox のインスタンスをデバッグ元と呼びます。

+ +

リモートデバッグを有効化する

+ +

始めにデバッグ元とデバッグ先の 開発ツールのオプション で、"ブラウザーとアドオンのデバッガーを有効" および "リモートデバッガーを有効" を有効にしなければなりません。

+ +

この作業は 1 回だけ必要です。設定値は再起動後も維持されます。

+ +

デバッガーサーバを開始する

+ +

次に、デバッグ先でデバッガーサーバーを開始します。

+ +

Firefox 37 より前のバージョン

+ +

Firefox 37 より前のバージョンでは、開発ツールバー を開いて以下のコマンドを実行します:

+ +
listen 6000
+ +

このコマンドは、ポート 6000 番でデバッガークライアントの接続を待ち受けするよう、デバッグ先に指示します。6000 番以外も使用できます。

+ +

デバッグ先を再起動した場合は、再度コマンドを実行しなければなりません。

+ +

Firefox 37 以降のバージョン

+ +

Firefox 37 以降でも前出の方法を使用できますが、もうひとつ方法があります。--start-debugger-server オプションを渡して、コマンドラインからデバッグ先を起動します:

+ +
/path/to/firefox --start-debugger-server
+ +

引数を渡さない場合、--start-debugger-server はデバッガーサーバーをポート 6000 番で待ち受けさせます。別のポートを使用する場合は、希望するポート番号を渡します:

+ +
/path/to/firefox --start-debugger-server 1234
+ +

注記: Windows では、start-debugger-server をハイフン 1 個で呼び出します:

+ +
firefox.exe -start-debugger-server 1234
+ +
+

注記: デフォルトではセキュリティ上の理由で、devtools.debugger.force-local を設定しています。外部のマシンから Firefox インスタンスのデバッグを行いたい場合はこの設定を変更してもかまいませんが、信頼済みのネットワークまたはどのマシンがアクセスできるかを厳しく制御するファイアウォール規則が設定された環境でのみ行ってください。

+
+ +

接続

+ +

接続方法は 2 種類あります。接続画面を使用する方法と、WebIDE を使用する方法です。

+ +

接続画面

+ +

デバッグ元のツール/ウェブ開発メニュー配下に、[接続...] という項目があります。この項目をクリックすると、以下のようなページが開きます:

+ +

+ +

デバッグ先に待ち受けさせているポート番号を入力して、"接続" をクリックします。すると、デバッグ先で接続確認を求めるダイアログが表示されるでしょう:

+ +

"OK" をクリックしてデバッグ元に戻ると、以下のようなページが表示されます:

+ +

+ + + +

WebIDE

+ +

デバッグ元で WebIDE を開くと、"ランタイムを選択" の中に "リモートランタイム" があります:

+ +

リモートランタイムを選択すると、ホスト名とポート番号を求められます。"localhost:6000"、またはデバッグ先で別のポート番号で待ち受けさせている場合はポート番号を指定します。

+ +

すると、警告ダイアログを表示します:

+ +

OK をクリックします。WebIDE が、メインプロセスに開発ツールを接続します。content タブに接続したい場合は、左側のメニューを開いてデバッグを行いたいタブを選択してください。

+ +

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 +--- +
{{ToolsSidebar}}
+ +

この記事では、Firefox開発ツールを Firefox 36 以降の Android 用 Firefox に接続する方法について説明します。

+ +

長い間、Firefox Developer Tools を Android 用 Firefox に接続してモバイル Web サイトをデバッグすることは可能でした。これまでは、かなり複雑でエラーが発生しやすいプロセスでした。Firefox 36 では、このプロセスをもっと簡単にしました。特に、adb ツールをまったく直接処理する必要はありません。これで WebIDE を使用して接続します。これは舞台裏での adb の設定を担当します。

+ +
+

これを行うには、デスクトップに Firefox 36 以上、モバイルデバイスに Firefox 35 が必要です。以前のバージョンを使用する必要がある場合は、デベロッパーツールを Android 用 Firefox に接続するための古い手順を参照してください。

+
+ +

+ +

このガイドは2つの部分に分かれています。最初の部分「前提条件」は、1回だけ行う必要のあるものをカバーし、2番目の部分の「接続する」は、デバイスを接続するたびに行う必要がある作業をカバーします。

+ +

前提条件

+ +

まず、次のものが必要です。

+ + + +

ADB ヘルパー

+ +

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

+ +

ADB ヘルパーのバージョンが 0.7.1 以上でない場合は、「Projects」メニューから「Extra Components を管理」を選択すると、「Extra Components」ウィンドウが表示されます。このウィンドウには ADB ヘルパーのエントリが含まれています：

+ +

「アンインストール」をクリックし、「インストール」をクリックすると、最新のバージョンになります。

+ +

Android 端末のセットアップ

+ +

まず、このリンクの手順 2 と 3 を実行して、USB デバッグを有効にします。

+ +

次に Firefox for Android でリモートデバッグを有効にします。ブラウザを開き、メニューを開き、[設定]、[デベロッパーツール] を選択します (一部の Android 搭載端末では、[詳細] を選択して [設定] オプションを表示する必要があります)。[リモートデバッグ] チェックボックスをオンにします。

+ +

+ +

ブラウザはポート転送を設定することを通知する通知を表示することがありますが、無視することができます。

+ +

接続する

+ +

Android 端末を USB ケーブルでデスクトップに接続し、WebIDE を開き、「ランタイム」メニューを開きます。「USBデバイス」の下に Android 用 Firefox がデバッグ対象として表示されます。

+ +

+ +

それを選択してください。Android 搭載端末では警告メッセージが表示されます。

+ +

+ +

[OK] をクリックします。WebIDE の「アプリケーションを開く」メニューをクリックします。デバイス上に開いているすべてのタブのリストが表示されます。

+ +

+ +

開発ツールを添付するタブを選択する：

+ +

これでリモートデバッグをサポートするすべての Firefox 開発ツールを使用できるようになります。詳細についてはリモートデバッグのページを参照してください。

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 +--- +
{{ToolsSidebar}}

このガイドでは、Android 版 Firefox で実行しているコードを USB 経由で調査あるいはデバッグするために、リモートデバッグを使用する方法を説明します。

+ +
+

最近、Android 版 Firefox に開発ツールを接続する方法を大幅にシンプル化しました。デスクトップ版 の Firefox 36 以降および Android 版の Firefox 35 以降を使用している場合は、本記事の代わりに新しい方法をご確認ください。

+
+ +

+ +

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

+ +

事前準備

+ +

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

+ + + +

ADB のセットアップ

+ +

次に adb コマンドラインツールを使用して、デスクトップと Android デバイスが相互に対話できるようにしなければなりません。

+ +

Android デバイスで行う作業

+ + + +

デスクトップで行う作業

+ + + +

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

+ +
adb devices
+ +

以下のように出力するでしょう:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

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

+ +

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

+ +

リモートデバッグの有効化

+ +

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

+ +

Android 版 24 以前

+ +

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

+ +

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

+ +

+ +

Android 版 Firefox 25 以降

+ +

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

+ +

+ +

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

+ +

デスクトップで行う作業

+ +

デスクトップでは、ツールボックスの設定でリモートデバッグを有効化します。ツールボックスを開いて、ツールバー内の "オプション" ボタンをクリックします。そして設定タブで "リモートデバッガを有効" にチェックを入れてください:

+ +

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

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

+ +

+ +

接続

+ +

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

+ +

デスクトップで行う作業

+ +

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

+ +
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
+ +

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

+ + + +

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

+ +
adb forward tcp:6000 tcp:6000
+ +

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

+ +

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

+ +
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+ +

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

+ +

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

+ +

ポート番号を変更した場合を除き、6000 を選択して "接続" ボタンを押下してください。

+ +

Android デバイスで行う作業

+ +

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

+ +

"OK" を押下してください。デスクトップ側は、このダイアログを許可するまで数秒待ちます: タイムアウトしたときは、デスクトップ側のダイアログで再度 "接続" を押下してください。

+ +

デスクトップで行う作業

+ +

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

+ +

これは、ブラウザタブで実行している Web コンテンツのデバッグを行いたいか、あるいはブラウザコード自体のデバッグを行うかを問い合わせるものです。

+ + + +

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

+ +

+ +

ツールボックスやツールボックス内のツールは、ローカルのコンテンツに接続した場合と同様に動作します。

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 +--- +
{{ToolsSidebar}}
+ +

デスクトップ版の Firefox の開発ツール を使用すると、別のブラウザーやランタイムで実行しているウェブサイトやウェブアプリをデバッグできます。別のブラウザーとはツールと同じ端末上のものであったり、 USB で接続した電話機など別の端末上のものを使用したりすることができます。

+ +

開発ツールの詳細な接続手順は、ランタイムにより異なります。

+ +

開発ツールと接続できるのは、デスクトップ版 Firefox、Android 版 Firefox、Thunderbird などの Gecko ベースのランタイムです。

+ + 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 +--- +
{{ToolsSidebar}}

このガイドでは、Thunderbird で実行しているコードの調査やデバッグを リモートデバッグ する方法を説明します。

+ +

Firefox のリモート接続機能を使用して、さまざまな開発ツールが Thunderbird をサポートします。現在サポートしているツールセットはウェブコンソール、インスペクター、デバッガー、スタイルエディター、プロファイラー、ネットワークモニターです。他のツールは、将来利用可能になる予定です。

+ +

Thunderbird の設定

+ +

Thunderbird では、デバッガーサーバーを有効にすることが必要です。メニューバーの [ツール] メニュー (alt + ツール) で [リモートデバッグを許可] を選択してください。デフォルトでは、デバッガーサーバーがポート 6000 番を使用して開始します。複数のプロファイルをデバッグするなど、デバッガーサーバーのポート番号を変更したい場合は、高度な設定のエディターを開いて設定項目 devtools.debugger.remote-port を変更してください。

+ +

Firefox の設定

+ +

Firefox はクライアントとして動作して、Thunderbird 用の開発ツールを操作するユーザーインターフェイスを提供します。Firefox と Thunderbird のメジャーバージョン番号を合わせるともっともよいのですが、異なるバージョンでも動作する場合があります。

+ +

Firefox の設定として、ツールボックスのオプションでリモートデバッグを有効にします。ツールボックスを開いて、ツールバー 内の "オプション" ボタンをクリックします。そして 設定 タブで "リモートデバッガーを有効" にチェックを入れてください:

+ +

+ +

以上で、Firefox のツールメニューから接続ページを開くことができます:

+ +

+ +

ブラウザーで接続ページが開きます。必要に応じてこのページをブックマークツールバーに追加できます。リモートポート番号を変更していなければ、フィールドにはすでに適切な値が入っています。接続ボタンをクリックすると、開発ツールのリモート接続を開始します。

+ +

+ +

接続すると、リモートのタブやプロセスの一覧が提示されます。Thunderbird と Firefox ではタブの概念が異なっており、リモートのタブの一覧に Thunderbird のすべての xul:browser 要素を表示します。これはコンテンツタブまたはメッセージリーダーになります。ほとんどの場合、Thunderbird 自体のコードをデバッグするために "メインプロセス" を選択するでしょう。開発ツールのセットを含む新しいウィンドウが開いて、Thunderbird のインスタンスに対して使用できます。

+ +

+ +

開発ツールを使用する

+ +

ツールの使用方法は、ほぼ一目瞭然でしょう。なんらかのツールで問題が発生した場合は、開発ツールのドキュメント をご覧ください。リモート接続を使用するため、若干の差異が発生する可能性があります。一部のツールは使用できず、またローカルと同等のパフォーマンスを実現できない可能性もあります。例えばリモートデバッガーツールを使用すると、内部のネットワーク接続を使用してファイルを転送しなければならないため、かなり時間がかかります。

+ +

トラブルシューティング

+ +

エラーが発生した場合は、まずはバージョン番号が一致しているかを確認してください。Thunderbird 24 を使用している場合は、Firefox もバージョン 24 を使用して接続してください。次に、Firefox の開発ツールの問題であるか、あるいは Thunderbird のリモート接続機能の問題であるかを明らかにすることが重要です。これを確認するには、Firefox だけを使用して問題が再現するかを試してください。例えばインスペクターツールで属性の値を設定できない場合は、Firefox のブラウザーデバッガーで属性の値を変更してみてください。ブラウザーデバッガーで再現しない場合は、Thunderbird のバグとして報告してください。再現する場合は、Firefox/開発ツールのバグとして報告してください。

-- cgit v1.2.3-54-g00ecf