オプションを開く
任意の開発ツールを開いて以下の操作を行うと、開発ツールのオプションペインが開きます:
- ツールボックスのツールバー上にある "オプション" ボタン () をクリックする:
- または、F1 (Firefox 43 の新機能) を押下すると、アクティブなツールと設定ページを切り替えできます
- または、Ctrl/Cmd+Shift+O を押下すると、アクティブなツールと設定ページを切り替えできます
オプションペインは、以下のようなものです:
カテゴリ
標準の Firefox 開発ツール
このチェックボックスのグループでは、ツールボックスで有効にするツールを決定します。新しいツールは、Firefox に搭載されていてもデフォルトで無効になっていることがあります。
利用可能なツールボックスのボタン
このチェックボックスのグループでは、どのツールをツールボックスのツールバーアイコンとして表示するかを決定します。
開発ツールのテーマを選択
ここでは、3 種類のテーマを切り替えることができます。
以下は Light テーマであり、デフォルトのテーマです:
Dark テーマ (Firefox Developer Edition のデフォルトのテーマです):
Firefox 48 の新機能
Firebug 拡張機能に似ている Firebug テーマもあり、Firebug に慣れているのでしたら "親しみ" を感じるでしょう:
共通設定
複数のツールに適用する設定です。ひとつだけあります:
- ログ出力を残す
- Web コンソールおよびネットワークモニタで、別のページへ移動するときに出力内容を消去するかを設定します。
調査
- ブラウザ CSS を表示
- ブラウザが適用するスタイル (ユーザエージェントスタイル) をインスペクタのルールビューに表示するかを設定します。この設定はインスペクタの計算済みビューにある "ブラウザ CSS" チェックボックスとは無関係であることに注意してください。
- DOM 属性値を省略 (Firefox 47 の新機能)
- デフォルトでは、インスペクタは 120 文字を超える DOM 属性を切り詰めて表示します。チェックボックスのチェックを外すと、この動作を行いません。この設定は、about:config の "devtools.markup.collapseAttributes" を切り替えます。属性を切り詰める文字数のしきい値を変更するには、about:config で "devtools.markup.collapseAttributeLength" を編集してください。
- 既定の色単位
- 調査時に色をどのように表現するかの設定です:
- 16 進数
- HSL(A)
- RGB(A)
- 色の名前
- 記述通りの単位 (Firefox 44 の新機能)
Web コンソール
- タイムスタンプを表示
- Web コンソールでタイムスタンプを表示するかの設定です。デフォルトで Web コンソールはタイムスタンプを表示しません。
スタイルエディタ
- 元のソースを表示
- この設定を有効にすると、ソースマップをサポートする CSS プリプロセッサを使用している場合に、スタイルエディタが生成された CSS ではなく元のプリプロセッサのソースを表示できます。スタイルエディタの CSS ソースマップのサポートについて確認してください。この設定を有効にすると、ページインスペクタのルールビューでも元のソースへリンクするようになります。
- CSS 自動補完
- スタイルエディタで候補の自動補完が可能になります。
JavaScript プロファイラ
- Gecko プラットフォームのデータを表示
- プロファイルに Gecko プラットフォームのシンボルを含めるかを設定します。
エディタ設定
これは CodeMirror ソースエディタの設定です。このエディタは Firefox に内蔵されており、スクラッチパッドやスタイルエディタなど、いくつかの開発ツールで使用しています。
- インデントを検知
- カーソルがある行のインデント状態に基づいて、新しい行を自動的にインデントします。
- 閉じ括弧自動入力
- インデントにスペース文字を使う
- タブの長さ
- キー割り当て
- 既定の CodeMirror のキー割り当て、またはいくつかの著名なエディタのキー割り当てから選択します:
- Vim
- Emacs
- Sublime Text
詳細な設定
- HTTP キャッシュを無効化
- ツールボックスを開いているすべてのタブで、最初に読み込む場合のパフォーマンスをシミュレーションするため、ブラウザの HTTP キャッシュを無効にします。この設定は持続的ですので、設定を行った後にツールボックスを開き直しても、キャッシュは無効化されたままになります。開発ツールを閉じた状態では、キャッシュが有効になります。なお、Service Workers はこの設定の影響を受けません。
バージョン 49 より前の Firefox ではこのオプションの名称が "キャッシュを無効" でしたが、HTTP キャッシュに影響があって Service Workers や Cache API には影響がないことを明確にするため改名しました。
- JavaScript を無効
- JavaScript が無効な状態でタブをリロードします。
- HTTP による Service Workers を有効
- 安全ではない Web サイトから Service Worker を登録可能にします
- ブラウザとアドオンのデバッガを有効
- Web コンテンツだけではなく、ブラウザ自体のコンテキストで開発ツールを使用できます。
- リモートデバッガを有効
- 開発ツールでリモートの Firefox インスタンスのデバッグを可能にします。