設定

ソフィア・エメリアノバ
Sofia Emelianova

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

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

[設定] タブの [デザイン] セクション。

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

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

  • チェックボックス。 個のチェックボックス
  • プルダウン リスト プルダウン。
  • 廃止されました。 非推奨

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

見栄え

このセクションでは、DevTools の外観をカスタマイズするオプションの一覧を示します。

Themes プルダウン。 は、DevTools UI のカラーテーマを設定します。

テーマ: DevTools のテーマをシステム設定からダークからライトに変更します。 - システム設定 - ライト - ダーク

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

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

パネル レイアウト: 要素のパネル レイアウトを横向きから縦向きに変更する。 - 横長 - 縦 - 自動

廃止されました。 色の書式 プルダウン。 は、[要素] > [スタイル] で CSS の色値の形式を設定します。

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

カラー形式: [スタイル] ペインでの色形式の変更
  • 作成日時
  • 16 進数: #dac0de
  • RGB: rgb(128 255 255)
  • HSL: hsl(300 度 80% 90%)

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

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

言語: 中国語の設定パネル。 - ブラウザの UI 言語 - ロケール オプションの 1 つ(この例では中国語)

チェックボックス。 パネルを切り替える Ctrl/Cmd + 09 のショートカットを有効にすると、キーボードでパネルを開くことができます。

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

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

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

[新機能] ドロワー タブ。

ソース

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

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

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

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

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

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

[ソース] パネルのステータスバーに、圧縮されたファイルへのリンクが表示されます。

チェックボックス。 タブを有効にしてフォーカスを移動すると、エディタにタブ文字を挿入する代わりに、Tab キー Tab キーで DevTools 内でフォーカスを移動させることができます。

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

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

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

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

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

チェックボックス。 [オートコンプリート] を使用すると、[エディタ] に便利な候補が表示されます。

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

チェックボックス。 [かっこの一致] は、[エディタ] で角かっこ、中かっこ、またはかっこにペアのないかっこに下線とハイライトを薄い赤で表示します。

赤の下線が付いたペアのない中かっこ。

チェックボックス。 コードの折りたたみでは、[エディタ] 内で中かっこでコードブロックを折りたたんだり展開したりできます。

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

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

[空白文字を表示] プルダウン。 は、エディタに空白文字を表示します。

DevTools を再読み込みする必要があります。オプションでは次の処理を行います。

  • All は、すべての空白文字をドット(...)で表します。また、Editor では、Tab 文字が行()であることを示します。
  • 末尾では、行末の空白文字が明るい赤でハイライト表示されます。
空白文字を表示: 選択中のオプション: [すべて] と [末尾]。 - なし - すべて (`...`) - 末尾

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

関数の実行中に一時停止したデバッガでは、代入ステートメントの横に変数値が表示されます。

チェックボックス。 [ブレークポイントのトリガー時にソースパネルにフォーカスする] を選択すると、実行を一時停止したブレークポイントがある行で [Sources] > [Editor] が開きます。

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

チェックボックス。 [CSS ソースマップを有効にする] を選択すると、生成された CSS ファイルのソース(.scss など)が DevTools によって検出され、表示されるようになります。

[Sources] パネルのナビゲーション ツリーの [Authored] セクションには .scss ファイルが表示されます。[要素] パネルの [スタイル] ペインで、CSS ルールの横に .scss ソースへのリンクが表示される。

チェックボックス。 [ファイルの終わりを超えてスクロールできるようにする] を使用すると、エディタの最終行より先にスクロールできます。

この動画では、このオプションを有効にして、ファイルの最後にスクロールする方法をご紹介します。

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

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

リモート ファイルパスからの読み込みはセキュリティ上の理由から禁止されていることを通知するメッセージがコンソールに表示されます。

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

デフォルトのインデント: オーバーライド オプションを無効にし、デフォルトのインデントを 2 つのスペースから 8 に、次に Tab キーに変更します。 - スペース 2 個 - スペース 4 個 - スペース 8 個 - タブ文字

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

要素

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

チェックボックス。 [ユーザー エージェントの Shadow DOM を表示] を使用すると、DOM ツリーに Shadow DOM ノードが表示されます。

[要素] パネルには、Shadow DOM ノードが表示されます。

チェックボックス。 ワードラップは、DOM ツリー内の長い行を改行して、次の行に折り返します。

[要素] パネルでは、長い行が単語ごとに改行され、次の行に改行されます。

チェックボックス。 [HTML コメントを表示] を選択すると、DOM ツリーに HTML コメントが表示されます。

[要素] パネルには、HTML コメントが表示されます。

チェックボックス。 カーソルを合わせると DOM ノードを表示: 検査します。 検査モードでビューポートの要素にカーソルを合わせると、対応する DOM ツリーのノードが選択されます。

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

チェックボックス。 詳細な検査ツールチップを表示: 検査します。 検査モードで、要素にカーソルを合わせると、ビューポートにツールチップが表示されます。

検査モードで表示される詳細なツールチップ。

チェックボックス。 [カーソルを合わせたときにルーラーを表示] を使用すると、DOM ツリーの要素にカーソルを合わせると、ビューポートにルーラーが表示されます。

ビューポートに表示されるルーラー。

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

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

CSS プロパティに関するドキュメントのツールチップ。

ネットワーク

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

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

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

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

[ネットワーク] パネルの [ネットワーク ログを記録] ボタン。

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

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

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

[キャッシュを無効にする] チェックボックス。

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

[ネットワーク] タブの [ウォーターフォール] 列(色分けあり / なし)。

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

インライン フレームでグループ化されたリクエストを含むネットワーク リクエスト ログ。

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

ブロックされたリクエスト フィルタが有効な [ネットワーク] パネルに表示された広告関連のネットワーク リクエスト。

パフォーマンス

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

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

フレーム チャートのマウスホイール アクション: フレーム チャートのマウスホイールのアクションをスクロールからズームに変更します。 - スクロール - ズーム

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

コンソール

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

Google Play Console と [設定] の同様のオプション。

チェックボックス。 [ネットワーク メッセージを非表示] を選択すると、コンソールのネットワーク メッセージが表示されなくなります。

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

チェックボックス。 [選択したコンテキストのみ] を選択すると、[コンソール] には選択したコンテキスト(top、iframe、worker、extension)に関するメッセージのみが表示されます。

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

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

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

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

コンソールに一覧表示されているタイムスタンプ付きのメッセージ。

チェックボックス。 履歴からのオートコンプリートにより、入力時に以前に実行したコマンドがコンソールに提案されます。

同じオプションは [Console] > [Settings] にあります。

コンソール履歴のコマンド オプションを含むオートコンプリート プルダウン。

チェックボックス。 [Enter キーでオートコンプリートの候補を受け入れる] を使用すると、Enter キーを押したときに、コンソールでオートコンプリートのプルダウンから選択した候補が受け入れられます。

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

チェックボックス。 コンソールで類似したメッセージをグループ化すると、同様のメッセージがグループ化されます。

同じオプションは [Console] > [Settings] にあります。

コンソール内の同様のメッセージがグループ化されます。

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

同じオプションは [Console] > [Settings] にあります。

コンソールに CORS エラーが表示される。

チェックボックス。 [積極的評価] を使用すると、コマンドの入力時にコンソールに出力のプレビューが表示されます。

同じオプションは [Console] > [Settings] にあります。

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

チェックボックス。 コード評価をユーザー アクションとして扱う: コンソールで実行するコマンドを、すべてユーザー操作に変換します。

つまり、評価時に navigator.userActivation.isActivetrue に設定します。同じオプションは [Console] > [Settings] にあります。

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

チェックボックス。 console.trace() メッセージを自動展開すると、Console のメッセージは展開されてconsole.trace()表示されます。

コンソールで展開された console.trace() メッセージ。

チェックボックス。 [ナビゲーション時にログを保持] を使用すると、ナビゲーションごとに [コンソール] で Navigated to メッセージをログに記録し、すべてのページのログを保存します。

同じオプションは [Console] > [Settings] にあります。

コンソールには、[Navigated to] メッセージが表示され、さまざまなページにわたってログが保存されます。

延長

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

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

リンクの処理: リンクを開くオプションを選択する。 - 自動デフォルトでは、[**ソース**] パネルでファイルを開きます。 - DevTools 拡張機能によって追加できる任意のオプション。

永続性

このセクションでは、DevTools による変更を保存する方法を制御するオプションの一覧を示します。

チェックボックス。 [ローカル オーバーライドを有効にする] を使用すると、ページ読み込み後もソースに加えた変更が維持されます。

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

デバッガ

このセクションでは、Debugger の動作を制御するオプションを示します。

チェックボックス。 [JavaScript を無効にする] では、JavaScript を無効にしたときのウェブページの表示や動作を確認できます。

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

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

チェックボックス。 [非同期スタック トレースを無効にする] は、コールスタックの非同期オペレーションの全体像を非表示にします。

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

グローバル

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

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

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

チェックボックス。 入力と同時に検索: 検索クエリの入力時に、DevTools が最初の検索結果に「ジャンプ」します。無効に設定した場合、Enter キーを押したときにのみ結果が表示されます。

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

同期

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

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

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