From 55c9b90af57bf54887500ed6b250f353a9216965 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 6 Jun 2021 00:06:26 +0900 Subject: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) を更新 (#976) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 英語版章題マクロを削除 - 2021/03/18 時点の英語版に同期 --- .../debugging_(before_firefox_50)/index.html | 168 ++++++++++----------- 1 file changed, 79 insertions(+), 89 deletions(-) (limited to 'files') diff --git a/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html b/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html index 0a9d5e2637..cfe25bfc3f 100644 --- a/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html +++ b/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html @@ -1,26 +1,28 @@ --- title: デバッグ (Firefox 50 より前) slug: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) +tags: + - Debugging + - Firefox + - Guide + - Mozilla + - Deprecated + - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) ---
{{AddonSidebar}}
-
-

この記事では Firefox バージョン50よりも前で WebExtension API を使った拡張機能のデバッグする方法を説明しています。

+
+

この記事では Firefox バージョン 50 よりも前で WebExtension API を使った拡張機能のデバッグする方法を説明しています。

-

Firefox 50 以降をお使いの場合、メイン記事の拡張機能をデバッグするを見てください。

+

Firefox 50 以降をお使いの場合、メイン記事の拡張機能をデバッグするを見てください。

-

この記事では、デフォルトでインストールされている Firefox 開発ツールを使って、WebExtension API で開発された拡張機能をどのようにデバッグするか説明します。Add-on SDK で開発したアドオンをデバッグする場合は、アドオンデバッガ の解説を参照してください。

- -

{{英語版章題("A simple example: notify-link-clicks-i18n")}}

+

この記事では、既定でインストールされている Firefox 開発ツールを使って、WebExtension API で開発された拡張機能をどのようにデバッグするか説明します。Add-on SDK で開発したアドオンをデバッグする場合は、アドオンデバッガー の解説を参照してください。

- + - - -

デバックツールへの接続方法を、簡単なサンプル拡張機能 "notify-link-clicks-i18n" を用いて説明します。このコードは GitHub の WebExtensions examples リポジトリ で公開されています。

+

デバッグツールへの接続方法を、簡単なサンプル拡張機能 "notify-link-clicks-i18n" を用いて説明します。このコードは GitHub の Extensions examples リポジトリ で公開されています。

この拡張機能は以下から構成されています。

@@ -29,15 +31,15 @@ translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50)
  • コンテンツスクリプト "content-script.js" （全てのページに読み込まれるスクリプト）
    • -

    ページ上のリンクをクリックするという動作は、コンテンツスクリプトがイベントとして感知します。リンクがクリックされた際、 リンクを含んだメッセージがコンテンツスクリプトからバックグラウンドスクリプトに送られます。

    +

    ページ上のリンクをクリックするという動作は、コンテンツスクリプトがイベントとして感知します。リンクがクリックされた際、リンクを含んだメッセージがコンテンツスクリプトからバックグラウンドスクリプトに送られます。

    バックグラウンドスクリプトがメッセージを受け取ると、リンクを含んだ通知画面が表示されます。

    -

    "content-script.js" は次の通りです:

    +

    "content-script.js" は次の通りです。

    /*
- リンクがクリックされた場合、バックグラウンドページにメッセージを送信する。
- このメッセージにはリンクの URL が含まれている。
+リンクがクリックされた場合、バックグラウンドページにメッセージを送信する。
+このメッセージにはリンクの URL が含まれている。
 */
 function notifyExtension(e) {
   var target = e.target;
@@ -52,17 +54,17 @@ function notifyExtension(e) {
 }
 
 /*
- クリックイベントのリスナ関数に notifyExtension() を追加する
+ クリックイベントのリスナー関数に notifyExtension() を追加する
 */
 window.addEventListener("click", notifyExtension);
    -

    "background-script.js" は次の通りです:

    +

    "background-script.js" は次の通りです。

    /*
- 受信したメッセージを記録する。
+ 受信したメッセージを記録する。
  続いて通知画面を表示する。
- この通知画面には、メッセージから読み取った URL が含まれている。
+ この通知画面には、メッセージから読み取った URL が含まれている。
 */
 function notify(message) {
   console.log("background script received message");
@@ -77,31 +79,27 @@ function notify(message) {
 }
 
 /*
- content script からのメッセージを受信するリスナ関数に `notify()` を追加する
+ content script からのメッセージを受信するリスナ関数に `notify()` を追加する
 */
 chrome.runtime.onMessage.addListener(notify);
    -

    以下の手順を実際に試してみる際は、 webextensions-examples リポジトリからコードを clone し、"notify-link-clicks-i18n" を インストールして下さい。

    - -

    {{英語版章題("The Browser Toolbox")}}

    - -

    ブラウザツールボックス

    +

    以下の手順を実際に試してみる際は、 webextensions-examples リポジトリからコードを clone し、"notify-link-clicks-i18n" を インストールしてください。

    -

    拡張機能をデバッグするには ブラウザツールボックス を使用します。

    +

    ブラウザーツールボックス

    -

    {{英語版章題("Prerequisites")}}

    +

    拡張機能をデバッグするには ブラウザーツールボックス を使用します。

    -

    前提条件

    +

    前提条件

    -

    ブラウザツールボックスを使用する準備として、以下の手順を踏む必要があります。

    +

    ブラウザーツールボックスを使用する準備として、以下の手順を踏む必要があります。

    -

    このメッセージには、Console API を使用しているコードから出力されたログも含まれています。また、JavaScript エンジンからもエラーメッセージが出力されます。

    +

    このメッセージには、Console API を使用しているコードから出力されたログも含まれています。また、JavaScript エンジンからもエラーメッセージが出力されます。

    -

    それでは上記のサンプルを使って試してみましょう。ブラウザツールボックスのコンソールタブを選択し、何かしらの Web ページを開き、リンクをクリックし、コンテンツスクリプトやバックグラウンドスクリプトからメッセージが記録されるのを確認してみましょう。

    +

    それでは上記のサンプルを使って試してみましょう。ブラウザーツールボックスのコンソールタブを選択し、何かしらの Web ページを開き、リンクをクリックし、コンテンツスクリプトやバックグラウンドスクリプトからメッセージが記録されるのを確認してみましょう。

    {{EmbedYouTube("Qpx0n8gP3Qw")}}

    -

    ただし、ブラウザツールボックスはどんなメッセージも受け取るため、要らないメッセージも多く受け取ってしまう問題があります。この問題を解決するにはフィルタリングと検索を参照して下さい。

    +

    ただし、ブラウザーツールボックスはどんなメッセージも受け取るため、要らないメッセージも多く受け取ってしまう問題があります。この問題を解決するにはフィルタリングと検索を参照してください。

    -

    {{英語版章題("Debugging JavaScript")}}

    +

    JavaScript をデバッグする

    -

    JavaScript をデバッグする

    +

    ブラウザーツールボックスを用いると、バックグラウンドスクリプトやブラウーザ上で動作しているスクリプト、ポップアップのページアクションで動作するスクリプトに対し、 JavaScript デバッガーでブレークポイントを設定することができます。

    -

    ブラウザツールボックスを用いると、バックグラウンドスクリプトやブラウザ上で動作しているスクリプト、ポップアップのページアクションで動作するスクリプトに対し、JavaScript デバッガでブレークポイントを設定することができます。

    +

    拡張機能がインストールされて有効になっていれば、デバッガーでバックグラウンドスクリプトにアクセスできます。ポップアップスクリプトは、ポップアップが表示されている間だけ見ることができます。ポップアップスクリプトが読み込まれた時点ですぐにデバッガーからアクセスしたい場合は、スクリプトの最初に debugger; 文を挿入してみてください。

    -

    拡張機能がインストールされて有効になっている間は、デバッガからバックグラウンドスクリプトにアクセス可能です。ポップアップスクリプトは、ポップアップが表示されている間にアクセス可能です。ポップアップスクリプトが読み込まれた時点ですぐにデバッガからアクセスしたい場合は、スクリプトの最初に debugger; 文を挿入してみてください。

    +

    JavaScript デバッガーを使用するには、まずはブラウザーツールボックスのデバッガータブを選択してください。そこにはブラウザーで動いている全てのソースコードが表示されていますので、検索ボックスをクリックしてソースの名前を入力し、自分の拡張機能のコードを探してください。

    -

    JavaScript デバッガを使用するために、まずはブラウザツールボックスのデバッガタブを選択します。ここにはブラウザで動いている全てのソースコードが表示されています。そのため、検索ボックスをクリックしてソースの名前を入力し、自分のスクリプトが表示されるようにします。

    - -

    自分のスクリプトを見つかったら、ブレークポイントをコードに設定したり、コードをステップ実行したり、他にもデバッガに可能なことは何でも実行できます。

    +

    自分のソースを見つかったら、ブレークポイントをコードに設定したり、コードをステップ実行したり、他にもデバッガーに可能なことは何でも実行できます。

    {{EmbedYouTube("3edeJiG38ZA")}}

    -

    {{英語版章題("JavaScript command line interpreter")}}

    - -

    JavaScript コマンドラインインタプリタ

    +

    JavaScript コマンドラインインタープリター

    -

    コンソールには コマンドラインインタプリタ が含まれており、実行しているプログラムの状態を調べたり操作することができます。この機能はコンソールを Web ページにアタッチしている際によく使いますが、ブラウザツールボックスでインタプリタを用いるのは一般に難しくなります（ブラウザツールボックスのコンソールは、デバッグしたい特定の拡張機能だけではなく、ブラウザ全体をスコープとしてしまうため）。

    +

    コンソールには コマンドラインインタープリター が含まれており、実行しているプログラムの状態を調べたり操作することができます。この機能はコンソールをウェブページに接続されている場合によく使いますが、ブラウザーツールボックスでは、コンソールのスコープが、デバッグしようとしている特定の拡張機能ではなく、ブラウザー全体になるため、一般的に使用することが難しくなります。

    -

    とはいえ、次のようなトリックを使うと上手くいきます。デバッガがブレークポイントで停止している間は、そのプログラムにコンソールのスコープが設定されます。そのため、拡張機能のコードにブレークポイントを設定しておくことで、拡張機能中の関数を呼び出したり、変数値を再代入したりするなど、拡張機能に対して動的にアクセスすることができます。

    +

    とはいえ、そんな時に役立つコツがあります。デバッガーがブレークポイントで一時停止している間、コンソールのスコープは、デバッガーが一時停止しているプログラムの位置でのスコープになります。そのため、拡張機能のコードでブレークポイントに当たると、拡張機能の関数を呼び出したり、変数の値を再設定したりといった具合に、拡張機能と直接やりとりすることができます。

    -

    この機能は コンソールを常時表示 （画面の半分にはコンソールを、もう半分にはデバッガなどの異なるツールを表示）している際に特に効果的です。

    +

    この機能は特に、分割コンソール機能と組み合わせると役立ちます。これによってツールボックスを半分に分割することができます。半分はコンソールになり、もう半分は別なコンソールになります (この場合は JavaScript デバッガーです)。

    {{EmbedYouTube("xprf58qOtLY")}}

    -

    {{英語版章題("Debugging content scripts")}}

    +

    コンテンツスクリプトのデバッグ

    -

    コンテンツスクリプトをデバッグする

    +

    ブラウザーツールボックスには大きな制約が 1 つあります。それは、マルチプロセス Firefox で開発している場合に、 JavaScript Debugger からコンテンツスクリプトにアタッチできない点です。

    -

    ブラウザツールボックスには大きな制約が 1 つあります。それは、マルチプロセス Firefox で開発している場合に、 JavaScript Debugger からコンテンツスクリプトにアタッチできない点です。

    +

    マルチプロセス Firefox では 2 つ (以上) のプロセスに分かれています。ブラウザー自身の UI やシステムコードを実行するプロセスと、ウェブページから読み込まれたスクリプトを実行する 1 つ (または複数) のコンテンツプロセスがです。ブラウザーツールボックスは、これらのプロセスのうち、最初のプロセスに接続されます。しかし、コンテンツスクリプトはコンテンツプロセスで実行されるため、ブラウザーツールボックスのソースリストには表示されません。

    -

    マルチプロセス Firefox では少なくとも 2 つのプロセスに分かれています。一つはブラウザ自身の UI やシステムコードを実行し、他は Web ページのスクリプト実行などを担当するコンテンツプロセス です。ブラウザツールボックスは前者のプロセスにデバッガとしてアタッチします。しかし、コンテンツスクリプトは他のプロセスで実行しているため、ブラウザツールボックスのスクリプト一覧には表示されないのです。

    +

    コンテンツスクリプトスクリプトをマルチプロセス Firefox でデバッグする場合は、 Browser Content Toolbox を使用してください。 Browser Content Toolbox はブラウザーツールボックスによく似ていますが、開発ツールをブラウザーのコンテンツプロセスにアタッチさせる点で異なり、コンテンツスクリプトにアクセスできるようになります。

    -

    コンテンツスクリプトスクリプトをマルチプロセス Firefox でデバッグするには Browser Content Toolbox を使用して下さい。Browser Content Toolbox はブラウザツールボックスにちょうど似ていますが、開発ツールをブラウザのコンテンツプロセスにアタッチさせる点で異なり、コンテンツスクリプトにアクセスできるようになります。

    +

    コンテンツスクリプトは、ロードされるまでソースリストに表示されないことに注意してください。読み込み後すぐにアクセスする必要がある場合は、スクリプトの先頭に debugger; 文を追加してみてください。

    補足: この Browser Content Toolbox は、マルチプロセス Firefox で開発している場合にのみ必要なものであり、またその場合のみ利用可能です。

    -
    -

    ブラウザツールボックスのオプションで "Worker のデバッグを有効" を設定すると、Browser Content Toolbox でデバッグができなくなります。この問題は Bug 1236892 で解決されるはずです。

    +
    +

    ツールボックスのオプションでワーカーのデバッグを有効にすると、 Browser Content Toolbox でのデバッグができなくなります (Bug 1236892)。

    {{EmbedYouTube("xAt3Q0PgJP4")}}

    -

    {{英語版章題("Debugging popups")}}

    +

    ポップアップのデバッグ

    -

    ポップアップをデバッグする

    +
    Firefox 47 の新機能
    -
    Firefox 47 からの新機能です
    - -

    Firefox 47 から、ブラウザツールボックスでポップアップの中身をデバッグできるようになりました。デバッグは 3 つの手順からなります。

    +

    Firefox 47 から、ブラウザーツールボックスでポップアップの中身をデバッグできるようになりました。デバッグは 3 つの手順からなります。

    • パネルの autohide を無効化する
    • ポップアップを開く
      • -
    • ポップアップを含んだドキュメントを選択する
      • +
    • ポップアップを含んだ文書を選択する

    {{EmbedYouTube("EEU4NeAS1s4")}}

    -

    autohide を無効化する

    +

    autohide を無効化する

    -

    パネルのデバッグに関してありがちな問題は、パネルの外をクリックすると隠れてしまう点です。そのため、まず初めにこの動作を無効化しておきましょう。ブラウザツールボックスで 4 つの小さい四角形からなるアイコンをクリックします。

    +

    パネルのデバッグに関してありがちな問題は、パネルの外をクリックすると隠れてしまう点です。そのため、まず初めにこの動作を無効化しておきましょう。ブラウザーツールボックスで 4 つの小さい四角形からなるアイコンをクリックします。

    -

    すると、Escape キーを押した場合でもパネルが前面に表示されたままになるはずです。

    +

    すると、 Esc キーを押した場合でもパネルが前面に表示されたままになるはずです。

    -
    -

    ここで設定した authohide の無効化は、拡張機能のポップアップのみならず、ハンバーガーメニュー () などによる ブラウザ本体のポップアップ にも適用されます。

    +
    +

    ここで設定した authohide の無効化は、拡張機能のポップアップだけでなく、 ブラウザー本体のポップアップ (ハンバーガーメニュー など) にも適用されます。

    -

    また、この設定はブラウザを再起動した後も引き継がれます。この件に関しては bug 1251658 で修正中ですが、現時点ではブラウザツールボックスを閉じる前に autohide を再び有効にしておくと良いでしょう。

    +

    また、この設定はブラウザーを再起動した後も引き継がれます。この件に関しては bug 1251658 で修正中ですが、現時点ではブラウザーツールボックスを閉じる前に autohide を再び有効にしておくと良いでしょう。

    -

    ブラウザの内部構造的には、この autohide ボタンは ui.popup.disable_autohide の設定項目を切り替えるだけのものです。そのため、about:config において手動で切り替えることも可能です。

    +

    ブラウザーの内部構造的には、この autohide ボタンは ui.popup.disable_autohide の設定項目を切り替えるだけのものです。そのため、about:config において手動で切り替えることも可能です。

    -

    ポップアップを開く

    - -

    次にポップアップを開きます。ここでブラウザツールボックスに戻ると、パネルが開いたままになっているはずです。

    +

    ポップアップを開く

    -

    ポップアップのフレームを選択する

    +

    次にポップアップを開きます。ここでブラウザーツールボックスに戻ると、パネルが開いたままになっているはずです。

    -

    ポップアップはそれ自身のフレームに読み込まれています。そのため、ブラウザツールボックスの フレーム選択ボタン でポップアップのドキュメントを選択します。このドキュメントは以下のような名前を持っています。

    +

    ポップアップのフレームを選択する

    -
    moz-extension://<some-uuid>/path/to/your-popup.html
    +

    ポップアップはそれ自身のフレームに読み込まれています。そのため、ブラウザーツールボックスの フレーム選択ボタン でポップアップのドキュメントを選択します。このドキュメントは以下のような名前を持っています。

    -

    {{EmbedYouTube("/9jdHDCKIN-U")}}

    +
    moz-extension://<some-uuid>/path/to/your-popup.html
    -

    こうしてツールボックスのスコープがポップアップに設定されました。インスペクタでポップアップの HTML や CSS の確認・変更が行えます。デバッガでは、ポップアップに読み込まれているスクリプトを検索したり、スクリプトにブレークポイントを設定することができます。

    +

    {{EmbedYouTube("9jdHDCKIN-U")}}

    -

    {{英語版章題("What about the Add-on Debugger?")}}

    +

    こうしてツールボックスのスコープがポップアップに設定されました。インスペクタでポップアップの HTML や CSS の確認・変更が行えます。デバッガーでは、ポップアップに読み込まれているスクリプトを検索したり、スクリプトにブレークポイントを設定することができます。

    -

    Add-on Debuggerとは？

    +

    Add-on Debuggerとは

    -

    Firefox での拡張機能のデバッグは、今後 Add-on Debugger が用いられる予定になっています。

    +

    Firefox での拡張機能のデバッグは、今後 Add-on Debugger が用いられる予定になっています。

    -

    ブラウザツールボックスと比較した際、Add-on Debugger は拡張機能ファイルのみを表示するため、容易にスクリプトを探すことができるという大きな利点があります。しかし今のところ、コンソールメッセージを拡張機能から Add-on Debugger へ表示させられないため、ブラウザツールボックスのほうが便利です。

    +

    ブラウザーツールボックスと比較した際、 Add-on Debugger は拡張機能ファイルのみを表示するため、容易にスクリプトを探すことができるという大きな利点があります。しかし今のところ、コンソールメッセージを拡張機能から Add-on Debugger へ表示させられないため、ブラウザーツールボックスのほうが便利です。

    -- cgit v1.2.3-54-g00ecf