[設定] > [設定] を使用して、DevTools とそのパネルの外観と動作を構成します。このタブには、一般的なカスタマイズ オプションとパネル固有のカスタマイズ オプションの両方が一覧表示されます。
設定を行うには、 [設定] > [設定] を開き、次に説明するセクションのいずれかまでスクロールします。
各設定の機能を確認するには、このページで設定の名前を検索し、
コマンドを使用してその説明を開きます。このリファレンスでは、さまざまな設定を次のアイコンで示しています。
個のチェックボックス
- プルダウン リスト
非推奨
デフォルト設定に戻すには、[設定] タブの最後までスクロールして、[デフォルトを復元して再読み込み] をクリックします。
デザイン
このセクションでは、DevTools の外観をカスタマイズするオプションを示します。
パネル レイアウト
は、パネルをパネル内に配置するものです。
[要素] > [スタイル] タブとその関連タブ、[ソース] > [デバッガ] ペインに影響します。auto オプションを指定すると、レイアウトが DevTools の幅に依存します。
言語
は、DevTools UI のロケールを設定します。
この設定を適用するには、DevTools を再読み込みします。
Ctrl/Cmd+0~9 のショートカットでパネルを切り替えると、キーボードでパネルを開くことができます。
この動画では、対応するキーボード ショートカットを使用してタブを切り替える方法を説明します。
ソース
このセクションでは、[ソース] パネルをカスタマイズするオプションについて説明します。
[匿名およびコンテンツ スクリプトで検索] を使用すると、[検索] タブを使用して、読み込まれたすべての JavaScript ファイル(Chrome 拡張機能のファイルを含む)を検索できます。
この動画では、拡張機能のソースファイルでテキストを検索する方法について説明します。
[サイドバーにファイルを自動的に表示する] を選択すると、エディタでタブを切り替えたときに、[ソース] > [ページ] ペインでファイルが選択されます。
この動画では、このオプションを有効にすると、タブを切り替える際に [Sources] パネルでナビゲーション ツリー内のファイルが選択される仕組みを説明します。
[タブのフォーカス移動を有効にする] をオンにすると、
Tab キーを押すと、エディタに Tab 文字が挿入されるのではなく、DevTools 内でフォーカスが移動します。
DevTools を再読み込みする必要があります。
この動画では、まず Tab キーで Tab 文字を挿入します。このオプションを有効にして DevTools を再読み込みすると、Tab キーでフォーカスが移動します。
[検出インデント] を使用すると、エディタで開かれたソースファイル内のインデントにインデントを設定できます。
DevTools を再読み込みする必要があります。
この動画ではまず、デフォルトのインデントである 8 つのスペースが示されています。このオプションを有効にすると、デフォルトのインデントがソースファイルのインデントにオーバーライドされます。
予測入力を使用すると、エディタに便利な候補が表示されます。
この動画では、まず候補は表示されません。このオプションを有効にすると、エディタにコマンド補完の候補が表示されます。
[かっこの自動閉じ] をオンにすると、開始かっこを入力したときに閉じかっこまたはタグが自動的に追加されます。
この動画では、自動的にかっこが閉じられる前と後で、かっこを開くキーを押す様子を示しています。
コードの折りたたみを使用すると、エディタで中かっこで囲まれたコードブロックを折りたたんだり展開したりできます。
DevTools を再読み込みする必要があります。
この動画では、このオプションを有効にしたときにコードブロックを折りたたむ方法について説明します。
空白文字を表示
はエディタに空白文字を表示します。
DevTools を再読み込みする必要があります。オプションの機能は次のとおりです。
- すべては、すべての空白文字をドット(
...
)として表します。また、エディタは、タブ文字を行(—
)として表します。 - 末尾: 行末の空白文字が明るい赤でハイライト表示されます。
[ブレークポイントのトリガー時にソースパネルを表示する] を選択すると、実行を停止したブレークポイントを含む行で [ソース] > [エディタ] が開きます。
この動画では、ブレークポイントで一時停止したときに、ソースパネルがフォーカスされていない状態から始まります。このオプションを有効にすると、DevTools の [Sources] パネルでエディタが開き、ブレークポイントを含むコード行が表示されます。
圧縮されたソースを自動的にプリティ プリントして、ソースを読みやすくします。
美しく表示すると、エディタに長いコード行が複数の行に分割されて表示され、行継続であることを示す -
が先頭に付きます。
![[Sources] パネルにプリプリントされたコード。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/pretty-print.png?hl=ja)
[ファイルの末尾までスクロールできるようにする] を選択すると、[エディタ] の最後の行までスクロールできるようになります。
この動画では、このオプションを有効にしてファイルの末尾を越えてスクロールする方法について説明します。
DevTools で、リモート ファイルパスからソースマップなどのリソースを読み込むことを許可する。セキュリティ上の理由により、デフォルトで無効になっています。
無効のままにすると、DevTools は次のようなメッセージをコンソールにログに記録します。
![セキュリティ上の理由によりリモート ファイルパスからの読み込みが禁止されていることを示すメッセージがコンソールに表示されます。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/a-message-the-console-in-052f2c13b3dc.png?hl=ja)
デフォルトのインデント
では、エディタで
Tab キーを押して挿入するスペースの数を選択できます。
この例では、デフォルトのインデントをまず 8 つのスペースに設定し、次に Tab 文字に設定する方法を示します。
要素
このセクションでは、[要素] パネルをカスタマイズするオプションを示します。
検査モードでビューポートの要素にカーソルを合わせると、DOM ツリーの対応するノードが選択されます。
この動画では、まず DOM ツリーで DOM ノードが選択されていないことを示します。このオプションを有効にすると、[要素] パネルにカーソルを合わせたときにノードが選択されます。
[CSS ドキュメントのツールチップを表示] では、[スタイル] ペインのプロパティにカーソルを合わせると、簡単な説明を含むツールチップが表示されます。
[詳細] リンクをクリックすると、プロパティの MDN CSS リファレンスが表示されます。
![CSS プロパティに関するドキュメントを含むツールチップ。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-tooltip-documentatio-7c33fb7ae9d4e.png?hl=ja)
ネットワーク
このセクションでは、[ネットワーク] パネルをカスタマイズするオプションについて説明します。ほとんどのオプションは、パネルの設定と同じです。
[ログを保持] は、[ネットワーク] パネルの [ログを保持] と同じです。ページの読み込みをまたいでリクエストを保存します。
この動画では、まずページの再読み込み時に更新されたリクエストログが、このオプションを有効にしても保持される様子が示されています。
[ネットワーク リクエストのブロックを有効にする] を選択すると、[ネットワーク リクエストのブロック] ドロワーのパターンに一致するリクエストがブロックされます。
この動画では、リクエストがブロックされていないことを最初に示します。このオプションを有効にすると、[ネットワーク リクエストのブロック] ドロワーのパターンによってブロックされます。
[機密データを含む HAR の生成を許可する] を選択すると、[ HAR をエクスポート] ボタンにオプションが追加されます。このオプションを使用すると、機密データ(サニタイズされたもの)の有無にかかわらずエクスポートできます。
機密データとは、Cookie
ヘッダー、Set-Cookie
ヘッダー、Authorization
ヘッダー内のデータのことです。
![[HAR をエクスポート] ボタンの 2 つのオプション。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/export-har-button.png?hl=ja)
[フレーム別にネットワーク ログをグループ化] は、[ネットワーク] パネルの [フレーム別にグループ化] と同じです。このオプションは、インライン フレームによって開始されたリクエストをグループ化します。
![インライン フレームでグループ化されたリクエストを含むネットワーク リクエスト ログ。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-network-request-log-8ecfc9e3f8259.png?hl=ja)
パフォーマンス
このセクションでは、[パフォーマンス] パネルをカスタマイズするオプションについて説明します。
Flamechart のマウスホイール操作
は、Flamechart を操作するときに、スクロールまたはズームの操作をマウスホイールに割り当てます。
この例では、[パフォーマンス] パネルの炎グラフに、マウスホイールのスクロールとズームの両方のアクションが表示されています。
Console
このセクションでは、コンソールをカスタマイズするオプションについて説明します。ほとんどのオプションは、コンソールの設定と同じです。
[ネットワーク メッセージを非表示] を選択すると、コンソールでネットワーク メッセージが非表示になります。
この動画では、 の [設定] と [Google Play Console の設定] の両方で、このオプションを使用してネットワーク メッセージを非表示にする方法を紹介します。
[選択したコンテキストのみ] を選択すると、コンソールには、選択したコンテキスト(トップ、iframe、ワーカー、拡張機能)のメッセージのみが表示されます。
この動画では、このオプションを 設定と[コンソール] > [設定] の両方で有効にし、コンソールでコンテキストを選択する方法を説明しています。
Log XMLHttpRequests を使用すると、コンソールで XHR がログに記録され、リクエストがフェッチされます。
この動画では、 の [設定] と [コンソール] > [設定] の両方でこのオプションを有効にして、
XHR finished loading
メッセージを コンソールにログに記録する方法について説明します。
[履歴からのオートコンプリート] をオンにすると、コンソールに、入力したコマンドに基づいて、以前に実行したコマンドの候補が表示されます。
同じオプションは [コンソール] > [設定] でも確認できます。
![コンソールの履歴からコマンド オプションを含む自動入力プルダウン。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/autocomplete-drop-down-a-6e0a4dc95d8d5.png?hl=ja)
[Enter キーで予測入力の候補を採用する] をオンにすると、Enter キーを押すと、Console で自動入力プルダウンから選択した候補が採用されます。
この動画では、このオプションを有効にする前後に Enter キーを押すとどうなるかを紹介しています。
コンソールで類似のメッセージをグループ化すると、コンソールで類似したメッセージがグループ化されます。
同じオプションは [コンソール] > [設定] でも確認できます。
![コンソールで類似したメッセージがグループ化されています。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/similar-messages-the-con-2026bc985883e.png?hl=ja)
早期評価では、コマンドを入力するとコンソールに出力のプレビューが表示されます。
同じオプションは [コンソール] > [設定] でも確認できます。
この動画では、さまざまな出力のプレビューが示されています。
[コード評価をユーザー アクションとして扱う] をオンにすると、コンソールで実行するすべてのコマンドがユーザー インタラクションになります。
つまり、評価時に navigator.userActivation.isActive
を true
に設定します。同じオプションは [コンソール] > [設定] でも確認できます。
この動画は、このオプションを有効にする前と有効にした後の navigator.userActivation.isActive
の評価結果を示しています。
[ナビゲーション時にログを保持] をオンにすると、コンソールはナビゲーションごとに Navigated to
メッセージをログに記録し、すべてのページのログを保存します。
同じオプションは [コンソール] > [設定] でも確認できます。
![コンソールに「Navigated to」メッセージが表示され、さまざまなページのログが保存されます。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-console-shows-naviga-f4bc36001187f.png?hl=ja)
広告表示オプション
このセクションでは、Chrome DevTools 拡張機能のリンク処理をカスタマイズするオプションについて説明します。
永続性
このセクションでは、DevTools での変更の保存方法を制御するオプションを示します。
デバッガ
このセクションでは、Debugger の動作を制御するオプションを示します。
[JavaScript を無効にする] を使用すると、JavaScript が無効になっているときのウェブページの外観と動作を確認できます。
ページを再読み込みして、ページが読み込み中に JavaScript に依存しているかどうか、依存している場合はどのように依存しているかを確認します。
JavaScript が無効になっている場合、Chrome のアドレスバーには対応する アイコンが表示され、DevTools の [ソース] の横に警告アイコン
が表示されます。
![アドレスバーのアイコンと、DevTools の [ソース] の横にある警告アイコン。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/an-icon-the-address-bar-92ceba2ae707c.png?hl=ja)
[非同期スタック トレースを無効にする] を選択すると、コールスタックで非同期オペレーションの「詳細」が非表示になります。
デフォルトでは、使用しているフレームワークがこのようなトレースをサポートしている場合、デバッガは非同期オペレーションのトレースを試みます。
![コールスタック内の非同期オペレーション。](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-async-operation-the-7d1209cb7afdd.png?hl=ja)
詳細については、非同期スタック トレースを表示するをご覧ください。
グローバル
このセクションでは、DevTools でグローバルに影響するオプションを示します。
[DevTools をポップアップで自動オープン] をオンにすると、新しいタブを開くリンクをクリックしたときに DevTools が開きます。つまり、target=_blank
を含むすべてのリンクが対象となります。
この動画では、まず DevTools を使用せずにリンクをクリックして新しいタブを開く方法を説明します。このオプションを有効にすると、新しいタブが開き、DevTools が開きます。
入力しながら検索: 検索語句を入力すると、DevTools が最初の検索結果に「ジャンプ」します。無効にすると、DevTools は Enter キーを押したときにのみ結果に移動します。
この動画では、検索クエリを入力する際に DevTools が「ジャンプ」する仕組みについて説明します。このオプションを有効にすると、Enter キーを押すと最初の結果が表示されます。
同期
このセクションでは、デバイス間で設定の同期を設定できます。
[設定の同期を有効にする] を使用すると、DevTools の設定を複数のデバイス間で同期できます。
この設定を使用するには、まず Chrome 同期を有効にします。詳しくは、同期設定をご覧ください。