--- title: ブラウザーツールボックス slug: Tools/Browser_Toolbox tags: - Debug - Firefox - JavaScript translation_of: Tools/Browser_Toolbox ---

{{ToolsSidebar}}

ブラウザーツールボックスは通常の ツールボックス とは異なり、ウェブページだけでなくアドオンやブラウザー自体の 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 つある場合は、フレーム選択のリストが以下のようになります:

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

ポップアップをデバッグするのは難しいです。ポップアップを外に出すとすぐにブラウザがそれらを隠すからです。この動作を無効にする方法があります。ツールボックスメニューをクリックし、ポップアップの自動非表示を無効にするを選択します。

これでポップアップを開くと、Esc キーを押すまで開いたままになります。 Inspector のノードピッカーを使用してそのパネルを選択し、その内容を調べて変更することができます。

{{EmbedYouTube("6edXcunw4jM")}}

同じテクニックを使って、アドオンによって作成されたポップアップをデバッグできます。

メモ: この変更はブラウザを再起動しても永続的ではありません。ブラウザのツールボックスを閉じると、設定はクリアされます。