設定

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

パネル レイアウト:

• 横向き
• カテゴリ
• 自動

この設定を適用するには、DevTools を再読み込みします。

言語:

• ブラウザの UI 言語
• 言語 / 地域のオプションの 1 つ（この例では中国語）

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

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

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

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

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

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

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

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

この動画では、自動的にかっこが閉じられる前と後で、かっこを開くキーを押す様子を示しています。

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

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

DevTools を再読み込みする必要があります。オプションの機能は次のとおりです。

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

空白文字を表示:

• なし
• すべて（...）
• トレイル

この動画では、ブレークポイントで一時停止したときに、ソースパネルがフォーカスされていない状態から始まります。このオプションを有効にすると、DevTools の [ソース] パネルに [エディタ] が開き、ブレークポイントを含むコード行が表示されます。

美しく表示すると、エディタに長いコード行が複数の行に分割されて表示され、行継続であることを示す - が先頭に付きます。

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

無効のままにすると、DevTools は次のようなメッセージをコンソールにログに記録します。

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

• 2 個のスペース
• 4 個のスペース
• 8 個のスペース
• タブ文字

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

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

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

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

この動画では、ページの再読み込み時にリクエストログが更新され、このオプションを有効にすると保持される様子を確認できます。

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

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

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

センシティブ データは、Cookie、Set-Cookie、Authorization ヘッダー内のデータです。

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

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

フレームチャートのマウスホイール操作:

• スクロール
• ズーム

この例では、[パフォーマンス] パネルの炎グラフに、マウスホイールのスクロールとズームの両方のアクションが表示されています。

この動画では、 の [設定] と [コンソール設定] の両方で、このオプションを使用してネットワーク メッセージを非表示にする方法を説明します。

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

この動画では、 の [設定] と [コンソール > 設定] の両方でこのオプションを有効にして、XHR finished loading メッセージを コンソールにログに記録する方法について説明します。

同じオプションは [コンソール] > [設定] でも確認できます。

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

同じオプションは [コンソール] > [設定] でも確認できます。

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

同じオプションは [コンソール] > [設定] でも確認できます。

同じオプションは [コンソール] > [設定] でも確認できます。

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

つまり、評価時に navigator.userActivation.isActive が true に設定されます。同じオプションは [コンソール] > [設定] でも確認できます。

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

同じオプションは [コンソール] > [設定] でも確認できます。

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

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

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

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

デフォルトでは、使用しているフレームワークがそのようなトレースをサポートしている場合、デバッガは非同期オペレーションのトレースを試みます。

詳細については、非同期スタック トレースを表示するをご覧ください。

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

入力しながら検索: 検索語句を入力すると、DevTools が最初の検索結果に「ジャンプ」します。無効にすると、DevTools は Enter キーを押したときにのみ結果に移動します。

この動画では、検索クエリを入力するときに DevTools が「ジャンプ」する様子を示します。このオプションを有効にすると、Enter キーを押すと最初の検索結果に移動します。

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