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

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

アドオンデバッガー

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

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

新しいウィンドウが開くのが確認できます。メインの Firefox ウィンドウが前面に切り替わるので、新しいウィンドウを前にするのにクリックしなければなりません。

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

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

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

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

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

バックグラウンドスクリプトは拡張機能の生存期間はロードされたままです。非表示の "バックグラウンドページ" の中にロードされます: 基本は空の HTML ドキュメントですが、"manifest.json" の "background" キー を使って自分自身の HTML コンテンツを指定できます。

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

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

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

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

例えば、ここで拡張機能のバックグラウンドスクリプトで定義された notify() 関数を呼び出します:

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

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

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

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

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

含まれているあらゆる JavaScript ソースはデバッガーで一覧表示されます:

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

アドオンデバッガーのコンソールにコードからログ出力されたあらゆるメッセージも見ることができるでしょう。

ページの HTML と CSS をデバッグするためにアドオンデバッガーを使うことができます。まず、オプションページを実行する iframe でツールを指定する必要があります。これをするには、オプションページを開いて、下記のスクリーンショットでハイライトされたアイコンをクリックし、ドロップダウンリストからオプションページを選択します。

インスペクタータブに切り替えると、ページの HTML と CSS を検証し、編集できます:

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

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

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

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

注記: この変更は、拡張機能のポップアップと同様に、省略メニュー (...) といった 組み込みのブラウザーポップアップにも適用されます。

設定はセッション間で永続化されません。ウィンドウをクローズすると、設定はポップアップを自動的に隠すに戻ります。

内部的には、このボタンは 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 の拡張機能の例を使っています。

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

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

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

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

含まれているあらゆる JavaScript ソースはデバッガーで一覧表示されます。

またアドオンデバッガーコンソールでコードがログ出力したあらゆるメッセージを確認できます。

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

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

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

開発者ツールページをデバッグするには:

開発者ツールパネルをデバッグするには:

  • 上部の開発者ツールページのステップに従ってください
  • 開発ツールパネルを選択する

含まれているあらゆる JavaScript ソースはデバッガーで一覧表示されます。

またアドオンデバッガーコンソールでコードがログ出力したあらゆるメッセージを確認できます。

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

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

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

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

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

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