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

設定

オプションを開く

任意の開発ツールを開いて以下の操作を行うと、開発ツールのオプションペインが開きます:

  • ツールボックスのツールバー上にある [オプション] ボタン () をクリックする:
  • または、F1 を押下すると、アクティブなツールと設定ページを切り替えできます
  • または、Ctrl/Cmd+Shift+O を押下すると、アクティブなツールと設定ページを切り替えできます

オプションペインは、以下のようなものです:

Depicts the Toolbox options

カテゴリー

標準の Firefox 開発ツール

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

利用可能なツールボックスのボタン

このチェックボックスのグループでは、どのツールを ツールボックスのツールバーアイコンとして表示するか を決定します。

Firefox 52 では、"要素を選択" ボタン を切り替えるチェックボックスを削除しました。"要素を選択" ボタンは常に表示します。

テーマ

ここでは、3 種類のテーマを切り替えることができます。

以下は Light テーマであり、デフォルトのテーマです:

Light theme for DevTools

Dark テーマ (Firefox Developer Edition のデフォルトのテーマです):

Dark theme for DevTools

Firebug 拡張機能 に似ている Firebug テーマもあり、Firebug に慣れているのでしたら "親しみ" を感じるでしょう:

Firebug theme for DevTools

共通設定

複数のツールに適用する設定です。ひとつだけあります:

ログ出力を残す
ウェブコンソールおよびネットワークモニターで、別のページへ移動するときに出力内容を消去するかを設定します。

調査

ブラウザー CSS を表示
ブラウザーが適用するスタイル (ユーザーエージェントスタイル) をインスペクターの ルールビュー に表示するかを設定します。この設定はインスペクターの 計算済みビュー にある "ブラウザー CSS" チェックボックスとは無関係であることに注意してください。
DOM 属性値を省略
デフォルトでは、インスペクターは 120 文字を超える DOM 属性を切り詰めて表示します。チェックボックスのチェックを外すと、この動作を行いません。この設定は、about:config の "devtools.markup.collapseAttributes" を切り替えます。属性を切り詰める文字数のしきい値を変更するには、about:config で "devtools.markup.collapseAttributeLength" を編集してください。
既定の色単位
調査時に色をどのように表現するかの設定です:
  • 16 進数
  • HSL(A)
  • RGB(A)
  • 色の名前
  • 記述通りの単位
Enable layout panel
実験的なレイアウトパネルを有効化します。この設定は Firefox Nightly にのみ存在します。

ウェブコンソール

タイムスタンプを表示
ウェブコンソールでタイムスタンプを表示するかの設定です。デフォルトでウェブコンソールはタイムスタンプを表示しません。
Enable new console frontend
実験的な新しいコンソールに切り替えます。この設定は Firefox Nightly にのみ存在します。

デバッガー

ソースマップを有効化
デバッガーで ソースマップのサポート を有効化します。
Enable new debugger frontend
新しいデバッガーを有効化します。この設定は Firefox Nightly にのみ存在します。

スタイルエディター

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

Screenshot Behavior

Screenshot to clipboard
スクリーンショットツール のアイコンをクリックすると、スクリーンショットの画像をクリップボードにコピーします (ダウンロードディレクトリーへの保存も行います)。Firefox 53 の新機能です。
Play camera shutter sound
スクリーンショットツール のアイコンをクリックしたとき、シャッターの音を鳴らします。Firefox 53 の新機能です。

エディター設定

これは CodeMirror ソースエディターの設定です。このエディターは Firefox に内蔵されており、スクラッチパッドスタイルエディター など、いくつかの開発ツールで使用しています。

インデントを検知
カーソルがある行のインデント状態に基づいて、新しい行を自動的にインデントします。
閉じ括弧自動入力
 
インデントにスペース文字を使う
 
タブの長さ
 
キー割り当て
既定の CodeMirror のキー割り当て、またはいくつかの著名なエディターのキー割り当てから選択します:
  • Vim
  • Emacs
  • Sublime Text

詳細設定

Gecko プラットフォームのデータを表示
プロファイルに Gecko プラットフォームのシンボルを含めるかを設定します。
HTTP キャッシュを無効化
ツールボックスを開いているすべてのタブで、最初に読み込む場合のパフォーマンスをシミュレーションするため、ブラウザーの HTTP キャッシュを無効にします。この設定は持続的ですので、設定を行った後にツールボックスを開き直しても、キャッシュは無効化されたままになります。開発ツールを閉じた状態では、キャッシュが有効になります。なお、Service Workers はこの設定の影響を受けません。
バージョン 49 より前の Firefox ではこのオプションの名称が [キャッシュを無効] でしたが、HTTP キャッシュに影響があって Service WorkersCache API には影響がないことを明確にするため改名しました。
JavaScript を無効化
JavaScript が無効な状態でタブをリロードします。
HTTP による Service Workers を有効化
安全ではないウェブサイトから Service Worker を登録可能にします
ブラウザーとアドオンのデバッガーを有効化
ウェブコンテンツだけではなく、ブラウザー自体のコンテキストで開発ツールを使用できます。
リモートデバッガーを有効化
開発ツールで リモートの Firefox インスタンスのデバッグ を可能にします。

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

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