ツールボックス

ツールボックスは、Firefox に組み込まれている開発ツールのほとんどを一か所で提供します。

ツールボックスは Web 開発メニュー (OS X や Linux では "ツール" メニューの配下、Windows では "Firefox" メニューの配下にあります) の "開発ツールを表示" を選択するか、提供するツール (例えば JavaScript デバッガやページインスペクタ) の起動により開くことができます。

デフォルトでは Firefox のウィンドウの下側にドッキングした状態で表示されますが、好みに応じて切り離すこともできます。ドッキングしているときは以下のような表示になります:

ウィンドウ自体は 2 つのパーツに分かれています: 上部のツールバーと、その下にあるメインペインです:

ツールバー

ツールバーには個々のツールをアクティブ化、ウィンドウのドッキングや切り離し、およびウィンドウを閉じるためのコントロールがあります:

左端には以下のボタンが並んでいます:

  • ウィンドウを閉じる
  • ツールボックスをブラウザウィンドウの下側にドッキングするか、横にドッキングするかを切り替える
  • ツールボックスを単独で表示するか、ブラウザウィンドウにドッキングするかを切り替える
  • 開発ツールの設定を開く

その隣にはツールボックスで提供するさまざまなツールを切り替えるための、ラベルがついたボタンが並んでいます。この並びには以下のツールが含まれています:

すべてのツールが表示されるとは限らない点に注意してください: その状況で実際に使用可能なツールだけが表示されます (例えば、リモートデバッグが未サポートのツールがあるため、デバッグ対象がツールボックスを起動した Firefox のインスタンスではない場合は、一部のツールしか表示されません)。

その右隣には、"要素を選択" ボタンがあります。これは Firefox 29 で、ページインスペクタからツールボックスのツールバーに移動しました。このボタンをクリックしてから Web ページ上でマウスを動かすと、各要素の周りに点線の枠を表示します。要素をクリックすると、その要素を選択した状態でページインスペクタが開きます。

その右隣には、スプリットコンソールをアクティブ化・非アクティブ化するボタンがあります。これにより、現在アクティブなツールから切り替えずに Web コンソールを使用できます。このボタンは Firefox 28 以降で使用できます。

最後に、右端にあるアイコンは、ツールボックスに含まれていないさまざまなツールを起動するためのユーザインターフェイスです。Firefox 30 より、ここに表示するアイコンはオプションで設定できます。

設定

"オプション" ボタンをクリックすると、ツールボックス自体やツールボックスが提供する各ツールの設定を行うことができます:

標準の Firefox 開発ツール

このチェックボックスのグループでは、ツールボックスで有効にするツールを決定します。新しいツールは、Firefox に搭載されていてもデフォルトで無効になっていることがあります。

Available Toolbox Buttons

この設定は Firefox 30 の新機能です。

このチェックボックスのグループでは、"スタンドアロンツール" のボタンをツールバーに表示するかを決定します。Firefox 30 より、デフォルトではノード選択、スプリットコンソール、レスポンシブデザインモードが有効です。

開発ツールのテーマを選択

ここでは、Light テーマと Dark テーマの切り替えができます:

調査

既定の色単位: 調査時に色をどのように表現するかの設定です: 16 進数、HSL(A)、RGB(A)、色の名前

Web コンソール

ログ出力を残す: 新しいページへ移動したとき、コンソールの出力を消去するかの設定です。

この設定は Firefox 28 以降で使用できます。

タイムスタンプを表示: Web コンソールでタイムスタンプを表示するかの設定です。Firefox 28 より、デフォルトで Web コンソールはタイムスタンプを表示しません。

スタイルエディタ

これらの設定は Firefox 29 以降で使用できます。

元のソースを表示: この設定を有効にすると、ソースマップをサポートする CSS プリプロセッサを使用している場合に、スタイルエディタが生成された CSS ではなく元のプリプロセッサのソースを表示できます。スタイルエディタの CSS ソースマップのサポートについて確認してください。この設定を有効にすると、ページインスペクタのルールビューでも元のソースへリンクするようになります

CSS 自動補完: スタイルエディタで候補の自動補完が可能になります。

JavaScript プロファイラ

Gecko プラットフォームのデータを表示: プロファイルに Gecko プラットフォームのシンボルを含めるかを設定します。

詳細な設定

  • キャッシュを無効: 最初に読み込む場合のパフォーマンスをシミュレーションするため、ブラウザのキャッシュを無効にします。
  • JavaScript を無効: JavaScript が無効な状態でタブをリロードします。
  • ブラウザデバッガを有効: Web コンテンツだけではなく、ブラウザ自体のコンテキストで開発ツールを使用できます。
  • リモートデバッガを有効: 開発ツールでリモートの Firefox インスタンスのデバッグを可能にします。

メインペイン

ツールボックスのメインペインの内容は選択されているツールに特有であり、またツールによって全面的に制御されます。

添付ファイル

ファイル サイズ 日時 添付者:
toolbox
355940 バイト 2014-02-06 15:27:27 wbamberg
toolbox-annotated
141529 バイト 2014-02-06 15:27:41 wbamberg
toolbox-toolbar
39249 バイト 2014-02-06 15:28:00 wbamberg
light theme
127686 バイト 2014-02-06 15:28:35 wbamberg
toolbox-settings
95123 バイト 2014-03-19 16:50:44 wbamberg

Document Tags and Contributors

Contributors to this page: yyss
最終更新者: yyss,