設定

[設定] > [設定] を使用して、DevTools とそのパネルの外観と動作を構成します。このタブには、一般的なカスタマイズ オプションとパネル固有のオプションの両方が一覧表示されます。

設定を行うには、 [設定] > [設定] を開き、以下で説明するセクションのいずれかまでスクロールします。

各設定の内容を確認するには、このページで設定の名前を検索し、説明を展開します。

このリファレンスでは、次のアイコンを使用してさまざまな設定を示します。

• 個のチェックボックス
• プルダウン リスト
• 非推奨

デフォルト設定に戻すには、[設定] タブの一番下までスクロールし、[デフォルトに戻して再読み込み] をクリックします。

デザイン

このセクションでは、DevTools の外観をカスタマイズするオプションについて説明します。

Themes は、DevTools UI のカラーテーマを設定します。

テーマ:

- システム設定 - ライト - ダーク

パネル レイアウト は、ペインをパネル内に配置します。

[要素] > [スタイル] と姉妹タブ、[ソース] > [デバッガ] ペインに影響します。auto オプションを使用すると、レイアウトが DevTools の幅に依存するようになります。

パネル レイアウト:

- 横向き - 縦向き - 自動

色の書式 は、[要素] > [スタイル] で CSS の色値の形式を設定します。

DevTools により、有効なカラー値が選択された形式に自動的に変換されます。

カラー形式:

• 作成どおり
• 16 進数: #dac0de
• RGB: rgb（128 255 255）
• HSL: hsl(300 度 80% 90%)

Language は、DevTools UI のロケールを設定します。

この設定を適用するには、DevTools を再読み込みしてください。

言語:

- ブラウザの UI 言語 - ロケール オプションの 1 つ。この例では中国語です。

パネルを切り替えるための Ctrl/Cmd + 0～9 のショートカットを有効にすると、キーボードを使用してパネルを開くことができます。

この動画では、対応するキーボード ショートカットを使用してタブを切り替える方法について説明します。

[一時停止状態のオーバーレイを無効化] を選択すると、コード実行が一時停止されたときに、ビューポートの [デバッガで一時停止] オーバーレイが非表示になります。

[更新後に新機能を表示] を選択すると、Chrome が更新されるたびに自動的に [最新情報] ドロワー タブが開きます。

ソース

このセクションでは、[ソース] パネルをカスタマイズするオプションを示します。

[匿名スクリプトとコンテンツ スクリプトで検索] を使用すると、[検索] タブを使用して、読み込まれたすべての JavaScript ファイル（Chrome 拡張機能のファイルを含む）を検索できます。

この動画では、拡張機能のソースファイル内のテキストを検索する方法を紹介しています。

[サイドバーにファイルを自動的に表示] を選択すると、エディタでタブを切り替えるときに、[ソース] > [ページ] ペインでファイルが選択されます。

この動画では、このオプションを有効にして、タブを切り替えると [Sources] パネルでナビゲーション ツリーでファイルが選択される方法を示しています。

[JavaScript ソースマップを有効にする] を使用すると、DevTools で生成または圧縮された JavaScript ファイルのソースを見つけることができます。

[タブによるフォーカスの移動を有効にする] を使用すると、エディタにタブ文字を挿入する代わりに、 Tab キーで DevTools 内でフォーカスを移動させることができます。

DevTools を再読み込みする必要があります。

この動画では、Tab キーで挿入されたタブ文字を最初に表示しています。このオプションを有効にして DevTools を再読み込みすると、Tab キーでフォーカスが移動します。

[インデントを検出] は、インデントをエディタで開いたソースファイルのインデントに設定します。

DevTools を再読み込みする必要があります。

この動画では、最初に 8 つのスペースのデフォルトのインデントについて説明します。このオプションを有効にすると、デフォルトのインデントがソースファイルのインデントにオーバーライドされます。

オートコンプリート: [エディタ] で便利な候補が表示されます。

この動画では、最初は候補が表示されません。このオプションを有効にすると、エディタにコマンド補完の候補が表示されます。

[かっこの一致] では、エディタで角かっこ、中かっこ、かっこにペアのない下線と薄い赤の下線とハイライト表示が表示されます。

コードの折りたたみを使用すると、エディタで中かっこ内のコードブロックを折りたたんだり展開したりできます。

DevTools を再読み込みする必要があります。

この動画では、このオプションを有効にするときにコードブロックを折りたたむ方法について説明しています。

空白文字を表示 は、エディタに空白文字を表示します。

DevTools を再読み込みする必要があります。オプションにより、次の処理が行われます。

• [すべて] は、すべての空白文字をドット（...）で表します。また、エディタは、Tab 文字を行（—）で表します。
• 末尾では、行の末尾の空白文字が明るい赤でハイライト表示されます。

空白文字を表示:

- なし - すべて (`...`) - 末尾

[デバッグ中に変数値をインラインで表示する] を使用すると、実行が一時停止している間、代入ステートメントの横に変数値が表示されます。

ブレークポイントのトリガー時に [Sources] パネルにフォーカスする: 実行を一時停止したブレークポイントがある行の [Sources] > [Editor] が開きます。

この動画では、まず、[Sources] パネルがブレークポイントで一時停止するとフォーカスがずれています。このオプションを有効にすると、[Sources] パネルで [Editor] が開き、ブレークポイントがあるコード行が表示されます。

[CSS ソースマップを有効にする] を選択すると、生成された CSS ファイルのソース（.scss など）を DevTools で検出して、ユーザーに表示できます。

[ファイルの最後からのスクロールを許可する] を使用すると、エディタの最後の行よりも先にスクロールできます。

この動画では、このオプションを有効にすると、ファイルの末尾からスクロールする方法を説明しています。

DevTools がリモート ファイルパスからソースマップなどのリソースを読み込めるようにします。セキュリティ上の理由により、デフォルトで無効になっています。

無効のままにすると、DevTools には次のようなコンソール メッセージが記録されます。

デフォルトのインデント を使用すると、エディタで Tab キーによって挿入されるスペースの数を選択できます。

デフォルトのインデント:

- スペース 2 個 - スペース 4 個 - スペース 8 個 - タブ文字

この例では、デフォルトのインデントを最初に 8 個のスペースに設定し、次にタブ文字に設定しています。

要素

このセクションでは、[要素] パネルをカスタマイズするオプションについて説明します。

ユーザー エージェントの Shadow DOM の表示: DOM ツリーに Shadow DOM ノードを表示します。

ワードラップは、DOM ツリー内の長い行を区切り、次の行に折り返します。

[HTML コメントを表示] は、DOM ツリーに HTML コメントを表示します。

[カーソルを合わせて DOM ノードを表示] を選択すると、 検査モードでビューポート内の要素にカーソルを合わせると、DOM ツリー内の対応するノードが選択されます。

この動画では、DOM ツリーで DOM ノードが選択されていないことを最初に示しています。このオプションを有効にすると、[要素] パネルでカーソルを合わせたときにノードが選択されます。

[詳細な検査ツールチップを表示] を選択すると、 検査モードで、要素にカーソルを合わせるとツールチップがビューポートに表示されます。

[カーソルを合わせてルーラーを表示] を使用すると、DOM ツリーの要素にカーソルを合わせると、ビューポートにルーラーが表示されます。

[CSS ドキュメントのツールチップを表示] では、[スタイル] ペインでプロパティにカーソルを合わせると、簡単な説明付きのツールチップが表示されます。

[詳細] リンクをクリックすると、プロパティの MDN CSS リファレンスが表示されます。

ネットワーク

このセクションでは、[ネットワーク] パネルをカスタマイズするオプションを示します。ほとんどのオプションは、パネルの設定と同じです。

[ログを保持] は、[ネットワーク] パネルの [ログを保持] と同じです。ページが読み込まれるたびにリクエストを保存します。

この動画では、最初にページの再読み込み時に更新され、このオプションを有効にするとログが保持される様子を示しています。

[ネットワーク ログを記録] は、[ネットワーク] パネルの [ネットワーク ログを記録] と同じです。ネットワーク ログへのリクエストの記録を開始または停止します。

[ネットワーク リクエストのブロックを有効にする] では、[ネットワーク リクエストのブロック] ドロワーのパターンに一致するリクエストがブロックされます。

この動画ではまず、リクエストがブロックされていないことを説明します。このオプションを有効にすると、[ネットワーク リクエストのブロック] ドロワーのパターンによってアクセスがブロックされます。

[キャッシュを無効にする（DevTools が開いている間）] は、[ネットワーク] パネルの [キャッシュを無効にする] と同じです。ブラウザのキャッシュを無効にします。

リソースタイプを色分けすると、ネットワーク ログの [ウォーターフォール] 列で、リクエストの種類に応じて異なる色でリクエストがハイライト表示されます。

[ネットワーク ログをフレーム別にグループ化] は、[ネットワーク] パネルの [フレーム別にグループ化] と同じです。このオプションは、インライン フレームによって開始されたリクエストをグループ化します。

[このサイトで強制的に広告のブロック] を選択すると、DevTools が開いているときに、ページ上の検出された広告がブロックされます。

パフォーマンス

このセクションでは、[パフォーマンス] パネルをカスタマイズするオプションを示します。

フレームチャートのマウスホイール アクション は、フレームチャート上で移動する際のマウスホイールにスクロールまたはズーム アクションを割り当てます。

フレーム チャートのマウスホイール アクション:

- スクロール - ズーム

この例では、[パフォーマンス] パネルのフレームチャートで、スクロールとズームの両方のマウスホイール アクションを表示します。

コンソール

このセクションでは、コンソールをカスタマイズするオプションについて説明します。ほとんどのオプションはコンソール設定と同じです。

[ネットワーク メッセージを非表示] をオンにすると、コンソールでネットワーク メッセージを非表示にできます。

この動画では、 の [設定] と [Google Play Console の設定] の両方で、このオプションを使用してネットワーク メッセージを非表示にする方法をご紹介しています。

[Selected context only] を使用すると、選択したコンテキスト（top、iframe、worker、extension）のみのメッセージがコンソールに表示されます。

この動画では、 の [Settings] と [Console] > [Settings] の両方でこのオプションを有効にし、Console でコンテキストを選択する方法について説明しています。

[Log XMLHttpRequests] は、コンソールで XHR リクエストとフェッチ リクエストをログに記録します。

この動画では、 の [Settings] と [Console] > [Settings] の両方でこのオプションを有効にし、XHR finished loading メッセージをコンソールに記録する方法を紹介しています。

[タイムスタンプを表示] を使用すると、コンソールでメッセージの横にタイムスタンプが表示されます。

[履歴からのオートコンプリート] では、コンソールに入力と同時に実行したコマンドの候補が表示されます。

同じオプションは [コンソール] > [設定] にあります。

[Enter キーでオートコンプリートの候補を受け入れる] を使用すると、Enter キーを押すと、コンソールがオートコンプリートのプルダウンから選択された候補を受け入れます。

この動画では、このオプションを有効にする前と後で Enter キーを押すとどうなるかを示します。

コンソールで類似のメッセージをグループ化すると、コンソールを使用して、類似するメッセージをグループ化できます。

同じオプションは [コンソール] > [設定] にあります。

[コンソールに CORS エラーを表示] を選択すると、コンソールに、ログに記録された CORS エラーが表示されます。

同じオプションは [コンソール] > [設定] にあります。

積極的な評価では、コンソールにコマンドの入力時に出力のプレビューが表示されます。

同じオプションは [コンソール] > [設定] にあります。

この動画では、さまざまな出力プレビューを示しています。

コード評価をユーザー アクションとして扱うことで、コンソールで実行するコマンドをすべてユーザーの操作に変えることができます。

つまり、評価時に navigator.userActivation.isActive を true に設定します。同じオプションは [コンソール] > [設定] にあります。

この動画では、このオプションを有効にする前と後の navigator.userActivation.isActive の評価結果を示しています。

console.trace() メッセージを自動的に展開すると、Console がログに記録するときに、展開された console.trace() メッセージが表示されます。

[ナビゲーション時にログを保持] を選択すると、ナビゲーションごとにコンソールに Navigated to メッセージが記録され、すべてのページのログが保存されます。

同じオプションは [コンソール] > [設定] にあります。

延長

このセクションでは、Chrome DevTools 拡張機能のリンク処理をカスタマイズするオプションについて説明します。

リンク処理 は、ソースファイルへのリンクをクリックしたときにファイルを開くためのオプションを設定します（[要素] > [スタイル] ペインなど）。

リンク処理:

- 自動。デフォルトで、ファイルは **[Sources]** パネルで開きます。 - DevTools 拡張機能で追加できる任意のオプション。

永続性

このセクションでは、DevTools での変更内容の保存方法を制御するオプションについて説明します。

[ローカル オーバーライドを有効にする] を選択すると、ソースに加えた変更がページ読み込み後も保持されます。

詳しくは、ローカル オーバーライドをご覧ください。

デバッガ

このセクションでは、Debugger の動作を制御するオプションについて説明します。

[JavaScript を無効にする] では、JavaScript が無効になっている場合のウェブページの外観と動作を確認できます。

ページを再読み込みして、読み込み中にページが JavaScript に依存しているかどうかを確認します。

JavaScript が無効になっている場合、Chrome のアドレスバーに対応する アイコンが表示され、DevTools では [ソース] の横に警告アイコン が表示されます。

[非同期スタック トレースを無効にする] を使用すると、[コールスタック] の非同期オペレーションの「全体像」が非表示になります。

デフォルトでは、使用しているフレームワークが非同期処理をサポートしている場合、Debugger は非同期処理をトレースしようとします。 詳細については、非同期スタック トレースを表示するをご覧ください。

Global

このセクションでは、DevTools でグローバルに影響するオプションについて説明します。

[DevTools をポップアップで自動開く] を選択すると、新しいタブを開くリンクをクリックすると DevTools が開きます。つまり、target=_blank を含むすべてのリンクです。

この動画ではまず、DevTools を使用せずにリンクをクリックして新しいタブを開く方法を説明します。このオプションを有効にすると、DevTools によって新しいタブが開きます。

入力しながら検索: 検索クエリの入力を開始すると、DevTools は最初の検索結果に「ジャンプ」します。無効にした場合、DevTools で Enter キーを押したときにのみ結果が表示されます。

この動画ではまず、検索クエリの入力に応じて DevTools が「ジャンプ」する仕組みを説明します。このオプションを有効にすると、DevTools で Enter キーを押すと最初の結果が表示されます。

同期

このセクションでは、デバイス間の設定の同期を設定できます。

[設定の同期を有効にする] を使用すると、DevTools の設定を複数のデバイス間で同期できます。

この設定を使用するには、まず Chrome 同期を有効にします。詳しくは、同期設定をご覧ください。