デバッグ

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

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

拡張機能は様々な異なる部品から構成されています — バックグラウンドスクリプト、ポップアップ、オプションページ、コンテンツスクリプト、サイドバー — 、そしてそれぞれの部品をデバッグするのに少しずつ違った作業フローを使う必要があります。それぞれの部品について、この記事に節があり、これらの節を個別に読むことができます。開発ツールの紹介から始めます、これは拡張機能のすべての部品をデバッグするために利用されます。

開発ツールのツールボックス

拡張機能のデバッグに使うのは開発ツールの実装で、ツールボックスと呼ばれます。ツールボックスを開くには:

  • URL バーで about:debugging と入力する
  • 左側のメニューで、この Firefox (または この Nightly) をクリックする
  • 拡張機能の横の デバッグ ボタンをクリックする

新しいタブが開き、インスペクターがツールボックスの中に表示されます。

Initial developer tools view, following a click on Inspect against an extension in about:debugging, showing the inspector

拡張機能をデバッグするには:

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

デバッグ作業のほとんどで、コンソールインスペクター または デバッガーを一緒に表示できると便利です。これは split console を使うと可能で、esc キーを押すとこのモードになります。

Following a click on Inspect against an extension in about:debugging, the initial developer tools view shows the inspector. Here we have turned on the split view as well.

ツールボックスのタブをドラッグすると独立したウィンドウにできるので、拡張機能を実行しているウィンドウの隣に配置することもできます。

Drag the toolbox to a new window, so you can observe it alongside your executing extension.

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

この節の例は "notify-link-clicks-l10n" という拡張機能の例を使います。続けたいならば、webextensions-examples リポジトリでこの例を探すことができます。

バックグラウンドスクリプトを使うと、ウェブページやブラウザーウィンドウと独立して、拡張機能の長い期間の状態や長い期間の操作ができます。バックグラウンドスクリプトは非表示の "バックグラウンドページ" の中にロードされます: 既定では空の HTML ドキュメントですが、"manifest.json" の "background" キー を使ってカスタムページを指定してバックグラウンドページを定義できます。
バックグラウンドスクリプトをデバッグするには、split console ビューでToolbox Debugger を使って Debugger の下に Console が見られるようにします。

開始するには、Sources でバックグラウンドスクリプトを開きます。

Opening a background script from the sources panel

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

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

As the background script executes the console shows any messages generated by console.log

コンソールのコマンドラインを使って、バックグラウンドスクリプトによって生成されたオブジェクトにアクセスや修正ができます。例えば、ここで notify() 関数を呼び出すことができます:

Functions in the extension can be run from the console.

デバッガーに切り替えた場合、ブレークポイントを設定したり、コードをステップ実行したり、拡張機能の状態を変更するといった、デバッガーでできるすべてを実行できます

The developer tools debugger enables you to perform the usual debugger tasks, such as adding breakpoints

デバッガーの使い方のより詳細は、Debugger ガイドを見てください。

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

We use the favourite-colour extension example to illustrate the debugging features relevant to options pages. This example is in the webextensions-examples repository.

オプションページ は拡張機能の開発者が提供する HTML ページで、拡張機能のオプションを含みます。通常はアドオンマネージャー (アドオンマネージャーを見るには "about:addons" ページに移動します) の iframe 内に表示されます。 You use an options page to enable the user to set and save options and settings that affect the behavior of your extension. Options pages display in an iframe in Add-ons Manager.

オプションページをデバッグするにはsplit console ビューでToolbox Debugger を使って Debugger の下に Console が見られるようにします。

開始するには:

  •  URLバーで about:addons と入力し、アドオンマネージャーを開きます。
  • 拡張機能の設定を開きます:
    To debug an options page, first, open the extension's preferences from Add-on Manager.
  • Sources.でオプションページを指定します。

With your extension's preferences page open, you can locate any scripts from the page in the debugger.

デバッガーに切り替えた場合、ブレークポイントを設定したり、コードをステップ実行したり、拡張機能の状態を変更するといった、デバッガーでできるすべてを実行できます。アドオンデバッガーのコンソールにコードからログ出力されたあらゆるメッセージも見ることができるでしょう。

ページの HTML と CSS をデバッグするためにアドオンデバッガーを使うことができます。まず、オプションページを実行する iframe でツールを指定する必要があります。これをするには:

  • Inspectorに切り替えます
  • ページセレクター(1)をクリック
  • オプションページの HTML項目 (2)をクリック

Selecting the iframe containing an options page's HTML to open it in Inspector.

インスペクタの使い方のより詳細は、 Inspector ガイドを見てください。

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

We use the beastify extension example to illustrate the debugging features relevant to popups. This example is in the webextensions-examples repository.

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

ポップアップの問題の 1 つに、ポップアップを開いてポップアップの外側をクリックした場合、ポップアップが閉じ、コードがアンロードされることがあります。これは明らかにデバッグをできなくします。この振る舞いを抑制するには、下記のような省略メニューからポップアップを自動的に隠すの無効化を選択します:

Auto-Hide.

To enable popups to remain visible and be available to debug, turn on the disable popup auto-hide option

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

注記: popup auto-hide の無効化は、省略メニュー (...) といった 組み込みのブラウザーポップアップにも適用されます。設定はセッション間で永続化されません。ウィンドウを閉じると、設定はポップアップを自動的に隠すに戻ります。

内部的には、このボタンは ui.popup.disable_autohide の設定を切り替えるだけなので、about:config を使って切り替えることもできます。

ポップアップが開いた時、JavaScript ソースがデバッガーに一覧表示されます。デバッガーに切り替えた場合、ブレークポイントを設定したり、コードをステップ実行したり、拡張機能の状態を変更するといった、デバッガーでできるすべてを実行できます。アドオンデバッガーのコンソールにコードからログ出力されたあらゆるメッセージも見ることができるでしょう。

With the popup auto-hide disabled, you can locate its JavaScript in the debugger

To inspect the popup's HTML and CSS, use Inspector in the split console view so you can view the Console below Inspector. You can review and modify the popup's HTML and CSS in Inspector, as you would with any webpage.

With popup auto-hide disabled, you can inspect the popup page's HTML and CSS in Inspector.

If your extension has multiple HTML documents open, click the page select icon (If your extension has multiple pages open, use the page selector to load the one you want to review in Inspector.) to open the popup's document.

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

We use the notify-link-clicks-i18n extension example to illustrate the debugging features relevant to content scripts. This example is in the webextensions-examples repository.

A content script is a part of your extension that runs in the context of a webpage; it enables your extension to react to events on the webpage and make changes to a webpage's content.

これは マルチプロセス Firefox では、コンテンツスクリプトが拡張機能の他の部品とは違うプロセスで実行されるためです。このため、コンテンツスクリプトをデバッグするには、そのページの通常のウェブ開発ツールを使用します:

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

If you've already activated the split console view, so you can view the Console below Debugger, the tools open in this mode. Otherwise, press esc to activate this mode.

You debug content scripts in the page in which they are injected using the standard web developer tools.

Select your content scripts listed in Sources. You can set breakpoints, step through code, modify the extension's state, and do everything else you'd expect to be able to do in a debugger. Any messages logged by your code display in Console.

開発ツールタブはコンテンツスクリプトが注入された時点ではまだ開いておらず、コンテンツスクリプトはSourcesに一覧表示されないことがあります。この状態になった場合、開発ツールタブが開いているページをリロードすると問題は改修されます。

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

We use the annotate-page extension example to illustrate the debugging features relevant to sidebars. This example is in the webextensions-examples repository.

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

サイドバーをデバッグするには、 use the Toolbox Debugger in the split console view so you can view the Console below Debugger.

To debug a sidebar, open the sidebar and locate its JavaScript in Debugger.

With an extension's sidebar open, the sidebar's JavaScript can be debugged.

In the Debugger you can set breakpoints, step through code, modify the extension's state, and do everything else you'd expect to be able to do in a debugger. またアドオンデバッガーコンソールでコードがログ出力したあらゆるメッセージを確認できます。

To inspect the sidebar's HTML and CSS, use Inspector in the split console view so you can view the Console below Inspector. You can review and modify the sidebar's HTML and CSS in Inspector, as you would with any webpage.

With an extension's sidebar open, the sidebar document's HTML and CSS can be inspected.

If your extension has multiple HTML documents open, click the page select icon (If your extension has multiple pages open, use the page selector to load the one you want to review in Inspector.) to open the sidebar's document.

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

We use the devtools-panels extension example to illustrate the debugging features relevant to developer tools pages and panels. This example is in the webextensions-examples repository.

開発ツール は開発ツールが開かれた時に隠れた HTML ページをロードすることで拡張され、開発ツールパネル は拡張機能の開発者が提供できるブラウザー UI で開発ツールとして表示される HTML ページです。

To debug development tools pages and panels, use the Toolbox Debugger in the split console view so you can view the Console below Debugger.

To debug additions to the developer tools, open the developer tools and any custom panels, and locate their JavaScript in Debugger.

With the developer tools open and any panels added visible, JavaScript associated with developer tools extensions is visible in the debugger.

In the Debugger you can set breakpoints, step through code, modify the extension's state, and do everything else you'd expect to be able to do in a debugger. またアドオンデバッガーコンソールでコードがログ出力したあらゆるメッセージを確認できます。

To debug the custom developer tools pages' HTML and CSS:

  • switch to Inspector.
  • click the page selector (1).
  • click the custom development tools page item you want to inspect (2).

With the developer tools open and any panels added visible, the HTML documents associated with developer tools extensions can be selected in inspector so that their HTML and CSS can be inspected.

You can review and modify the custom development tools page HTML and CSS in Inspector, as you would with any webpage.

パーミッションリクエストをデバッグする

 パーミッションリクエストのデバッグについては、Test permission requests をご覧ください。

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

ブラウザーの再起動、それによりセッションが回復する、によって影響を受ける状態で拡張機能が有効化しているならば、そういった状況でコードの動作が予想通りであるかを確かめる追加検証を行なったほうがいいでしょう。

詳細は テストの持続と再起動機能 をご覧ください。