この翻訳は不完全です。英語から この記事を翻訳 してください。

ここで述べられているテクニックは Firefox 50 以降で動作します。Firefox の前のバージョンを使う必要がある場合、WebExtension API を使った拡張機能を Firefox 50 より前でデバッグするの記事を参照してください。

この記事では、Firefox 開発ツールを使って、WebExtension API で開発された拡張機能をどのようにデバッグするか説明します。

拡張機能にはいろいろな部分が含まれることがあります — バックグラウンドスクリプト、ポップアップ、オプションページ、コンテンツスクリプト、サイドバー — 、そしてそれぞれのぶ分をデバッグするのに少しずつ違った作業フローを使う必要があります。よって各゛文はこの記事の最上位レベルの節にあって、その狙いは各節を切り離して読むことができることです。アドオンデバッガーの紹介から始めますが、これを拡張機能の殆どの部分で使うことになります。

アドオンデバッガー

この記事の大半でアドオンデバッガーを使います。これを開くには:

  • Firefox を開き
  • URL バーで "about:debugging" と入力
  • "アドオンのデバッグを有効化" とあるチェックボックスをチェックする
  • 拡張機能の横の "デバッグ" ボタンをクリックする
  • warningダイアログで "OK" をクリックする

するとウィンドウが開くのが見えます。メインの Firefox ウィンドウが前画面に移るので、新しいウィンドウをクリックして前に持ってこないといけません。

この新しいウィンドウは「ツールボックス」と呼ばれ、我々が使うデバッグツールが入っています。タブインターフェイスがあります: 一番上にあるタブの行でいろいろなツールを切り替えられます:

この記事では、次の3つのデバッグツールを使います:

  • Console: ブラウザーが拡張機能を実行する時に、ブラウザーのエラーメッセージと同じく拡張機能によって出力されるメッセージを表示します。拡張機能のコンテキストで JavaScript を実行するコマンドラインも提供します。
  • デバッガー: 拡張機能の JavaScript でブレークポイントやウォッチポイントを設定し、内部状態を検査したり変更したりできるようになります。
  • インスペクタ: 拡張機能のページを作るのに使う HTML と CSS を検査したり変更したりできるようになります。

バックグラウンドスクリプトをデバッグする

この節の例は "notify-link-clicks-l10n" の例の拡張機能を使っています。これで遊ぶには、webextensions-examples リポジトリでこの例を見つけられます。

バックグラウンドスクリプトは拡張機能の寿命の間ロードされたままです。これは非表示の「バックグラウンドページ」の中にロードされています: デフォルトでこれは空の HTML ドキュメントですが、"manifest.json" 内の "background" キーを使って自分の HTML を指定できます。

アドオンデバッガーを使ってバックグラウンドスクリプトをデバッグできます。

アドオンデバッガーのコンソール内でログ出力を、自身のバックグラウンドスクリプトからの console.log() 呼び出しやブラウザーの実行で起こるエラーを含めて見ることができます。この時に、コンソールは、拡張機能のコードに関連するエラーだけでなく、ブラウザーによって発生するすべてのエラーを表示することに注意します。

例えば、notify-link-clicks-i18n の例の拡張機能では、コンテンツスクリプトからメッセージを受け取った時にバックグラウンドからのメッセージをログ出力します:

コンソールのコマンドラインを使って、バックグラウンドによって作られたオブジェクトにアクセスや修正ができます。

例えば、次では拡張機能のバックグラウンド内の notify() 関数を呼び出しています:

デバッガーに切り替えた場合、すべての拡張機能のバックグラウンドスクリプトを見ることができます。ブレークポイントをセットしたり、コード内をステップ実行したり、デバッガーでできるすべてを実行できます。

デバッガー内でエスケープキーを押した場合、ツールボックスは分離して、下半分がコンソールで占められます。ブレークポイントでは、コンソールを使ってプログラムの状態を編集できます。この詳細は分離コンソールを見てください。

オプションページをデバッグする

オプションページ は拡張機能開発者が提供できるHTML ページで、拡張機能のオプションを含むものです。これは典型的にはアドオンマネージャーの iframe内に表示されます (アドオンマネージャーを見るには "about:addons" ページに移動します)。

オプションページをデバッグするには:

同梱されているあらゆる JavaScript ソースがデバッガーに表示されます:

この動画は favourite-colour の例の拡張機能を使っています。

コードによってアドオンデバッガーのしちしはちとはコンソールに出力されるメッセージログも見えるでしょう。

アドオンデバッガーを使って HTML と CSS ファイルのデバッグも可能です。しかしまず、オプションページをホストする iframe を指しておく必要があります。これをするには、オプションページを開いて、下記にハイライトされたアイコンをクリックし、ドロップダウンリストからオプションページを選択します。

それからインスペクタータブに移ると、ページのHTML と CSS が編集できます:

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

ポップアップ はブラウザーアクションやページアクションに添付されたダイアログです。これには スタイリングやふるまいのための CSS と JavaScript を含んだ HTML 文書を指定します。ポップアップが見えると、アドオンデバッガーでそのコードをデバッグできます。

ポップアップの問題は、ポップアップ開いてが外部をクリックした場合、ポップアップは閉じられてコードはアンロードされます。これは明らかデバッグ不能です。このふるまいを抑えるには、アドオンデバッガー内の下記スクリーンショットにハイライトされているボタンをクリックします:

ここで、エスケープを押すまでポップアップが開いたままになります。

この変更は、拡張機能のポップアップと同様に、ハンバーガーメニュー ()といった 組み込みのブラウザーポップアップにも適用されるのに注意します。

またこの変更は永続的で、ブラウザー再起動後にも続きます。これは bug 1251658 として Firefox 57 以降は修正されており、以前のバージョンで自動的に隠したい場合は、ブラウザーツールボックスを閉じる前に再度ボタンをクリックします。

内部的には、このボタンは単に ui.popup.disable_autohide の設定をトグルしていて、about:config を使って手動でトグルすることも可能です。

ポップアップが開いたとき、その JavaScript ソースはデバッガーに一覧されます。ブレークポイントをセットしたり、プログラムの内部状態を編集できます:

この動画は beastify の例の拡張機能を使っています。

アドオンデバッガーを使ってHTML と CSS をデバッグすることもできます。しかしまず、ポップアップの文書を指しておく必要があります。これをするには、ポップアップを開いて、下記にハイライトされたアイコンをクリックし、ドロップダウンリストからポップアップのページを選択します:

それからインスペクタータブに移ると、ポップアップのHTML と CSS が編集できます:

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

アドオンデバッガーを使ってバックグラウンドスクリプトやオプションページやポップアップをデバッグできます。しかし、コンテンツスクリプトのデバッグには使えません。これは マルチプロセス Firefox では、コンテンツスクリプトが拡張機能の他の部分とは違うプロセスで実行されるためです。

ウェブページに付属したコンテンツスクリプトをデバッグするには、次の方法でそのページの通常のウェブ開発ツールを使用します:

  • Firefox メニュー (メニューバーを表示していたり Mac OS X では、ツールメニュー) 内のウェブ開発のサブメニューから「開発ツールを表示」を選ぶか
  • または CtrlShiftI (OS X ではCommandOptionI ) のキーボードショートカット

既定では、ツールはブラウザータブの下にくっついて表示されます、その事実を反映してそれはタブにくっついています。コンテンツスクリプトの console.log() 文からの出力を見ることができるでしょう。デバッガーの一覧にコンテンツスクリプトを見ることもできて、そこでブレークポイントのセットやコードのステップ実行などができます。

この動画は notify-link-clicks-i18n の例の拡張機能を使っています。し

If the developer tools tab was not already open when the content script was injected, sometimes the content script is not listed in the debugger panel. If you experience this, reloading the page with the developer tools tab open should fix the problem.

サイドバーをデバッグする

サイドバー は拡張機能のUIからサイドバーとして開かれる HTML ページで、拡張機能開発者が提供できます。

サイドバーをデバッグするには:

これに含まれるあらゆる JavaScript ソースがデバッガーに表示されます。

コードによってアドオンデバッガーのコンソールに出力されるメッセージログも見えるでしょう。

アドオンデバッガーを使って HTML と CSS ファイルのデバッグも可能です。しかしまず、サイドバーをホストする iframe を指しておく必要があります。これをするには、サイドバーを開いて、下記にハイライトされたアイコンをクリックし、ドロップダウンリストからサイドバーを選択します:

開発ツールページ・パネルをデバッグする

Developer tools are extended by loading a hidden HTML page when devtools are opened and developer tools panels are HTML pages displayed as a developer tool in the browser UI that the extension developer can supply.

To debug the developer tools page:

To debug developer tools panels:

  • Follow the steps for the developer tools page above
  • Select your developer tools panel

Any JavaScript sources it includes are then listed in the Debugger.

You'll also see any messages logged by your code in the Add-on Debugger's Console.

You can also use the Add-on Debugger to debug the page's HTML and CSS. First, though, you need to point the tools at the iframe that hosts the options page. To do this: open the sidebar, click the icon highlighted in the screenshot below, and select the sidebar from the drop-down list:

ブラウザーの再起動をデバッグする

If your extension is active in ways that might be affected by the browser restarting, such as a session being restored, then you may want to do extra testing to ensure your code works as expected in those conditions.

You can test your extension across browser restarts by following these steps:

  1. Create a new browser profile. This is optional, but recommended as you'll be disabling extension signing, which opens you up to malicious code installation, and also because your extension could affect your default profile in unexpected ways.
  2. Open your new browser profile in Firefox Developer Edition or Firefox Nightly. Those are the only two channels of Firefox that allow disabling extension signing. Unfortunately this means you cannot test your extension across restarts in a release version of Firefox.
  3. Type about:config into the location bar, hit Enter, and then use the search box on that page to find the "xpinstall.signatures.required" preference, and change it to "false".
  4. In your manifest.json file, add a new top-level key called "applications" with an object value containing a key called "gecko" with an object value that contains a key called "id", with a string value of "a@b". It should look like: "applications": {"gecko": {"id": "a@b"}}. You can change the values of "a" and "b" to whatever you like. Remember to remove the "applications" key from your manifest.json file once you're finished testing restarts.
  5. Package your extension with "web-ext build" and change the result file's extension to ".xpi"
  6. Open the .xpi file with Firefox with the File->Open menu. Your extension should now be installed, and you can restart the browser and it will still be there.

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Uemmra3, hashedhyphen, lv7777
 最終更新者: Uemmra3,