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

ブラウザーツールボックスは通常の ツールボックス とは異なり、ウェブページだけでなくアドオンやブラウザー自体の JavaScript をデバッグすることができます。ブラウザーツールボックスのコンテキストは単一のタブ内のページではなく、ブラウザー全体になります。

ブラウザーツールボックスの有効化

ブラウザーツールボックスを開く

メニューボタン をクリックして、メニュー項目 "開発ツール"、"ブラウザーツールボックス" の順に選択すると、ブラウザーツールボックスが開きます。

Firefox 39 より、Ctrl + Alt +Shift + I のキーコンビネーション (Mac では Cmd + Opt +Shift + I) でも開くことができます。

ブラウザーツールボックスを開くと、以下のようなダイアログを表示します (これは設定項目 devtools.debugger.prompt-connection を false にすることで無効化できます):

OK をクリックすると、ブラウザーツールボックスを個別のウィンドウで表示します:

ブラウザーの chrome ウィンドウの調査、またブラウザー自体および実行中のアドオンが読み込んでいるすべての JavaScript ファイルの確認とデバッグが可能です。また、以下の開発ツールへ全面的にアクセスできます:

• デバッガー (注記: リスタートレスまたは SDK ベースのアドオンをデバッグしたい場合は、アドオンデバッガーを試してください。)
• コンソール
• スタイルエディター
• パフォーマンス
• ネットワークモニター
• スクラッチパッド
• ページインスペクター

chrome: および about: のページは一般のコンテンツページと同様に、通常の デバッガー でデバッグできます。

対象ドキュメントを決める

通常のツールボックスでは、ドキュメント内の特定の iframe を対象にすることができるボタンがツールバーにあります。Firefox 40 よりブラウザーツールボックスにも同じ外見のボタンがありますが、こちらは iframe だけでなくトップレベルの chrome ウィンドウや content ウィンドウもリストに含まれています。これにより content タブだけでなく個々の chrome ウィンドウやポップアップ内のドキュメントも調査できます。

例えばブラウザーウィンドウが 2 つあり、そのうちひとつに content タブが 1 つ、もうひとつのウィンドウに content タブが 2 つある場合は、フレーム選択のリストが以下のようになります:

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

ポップアップは、その外部をクリックするとブラウザーによって即座に閉じられてしまうため、デバッグが困難です。Firefox 47 より、この動作を無効化する手段があります。ツールボックスのツールバー上にある、正方形が 4 つ見えるボタンをクリックします:

ポップアップを開くと、Escape を押下するまで開いたままになります。パネルを選択するためにインスペクターのノードピッカーを使用して、内容の調査や編集が可能になります:

アドオンが作成するポップアップのデバッグに、同じ方法を使用できます。