MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

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

注記: リスタートレスまたは SDK ベースのアドオンをデバッグしたい場合は、アドオンデバッガー を試してください。それら以外のアドオンでは、ブラウザーツールボックスを使用してください。

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

ブラウザーツールボックスはデフォルトで無効です。有効化するには、"ブラウザーとアドオンのデバッガを有効" および "リモートデバッガを有効" にチェックを入れなければなりません。

開発ツールの オプション を開いて、"詳細な設定" で "ブラウザーとアドオンのデバッガーを有効" および "リモートデバッガーを有効" にチェックを入れてください。

Developer Tools Settings

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

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

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

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

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

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

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

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

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

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

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

Firefox 47 の新機能

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

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

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

この挙動変更は、ブラウザーを再起動しても継続します。

bug 1251658 で問題解決に取り組んでいますが、それまではブラウザーツールボックスを閉じる前にボタンを再度クリックすることで、自動的に閉じる動作を再有効化するとよいでしょう。

内部では、このボタンは設定項目 ui.popup.disable_autohide を切り替えていますので、about:config を使用して手動で変更することができます。

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

 このページの貢献者: SatoshiOhata, yyss
 最終更新者: SatoshiOhata,