設定

Sofia Emelianova
Sofia Emelianova

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

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

[設定] タブの [外観] セクション。

各設定の機能を確認するには、このページで設定の名前を検索し、 コマンドを使用してその説明を開きます。

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

  • チェックボックス。 個のチェックボックス
  • プルダウン リスト プルダウン。
  • サポート終了。 非推奨

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

デザイン

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

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

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

パネル レイアウト: 要素のパネル レイアウトを水平から垂直に変更する。
  • 横向き
  • カテゴリ
  • 自動

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

言語: 中国語の [設定] パネル。
  • ブラウザの UI 言語
  • 言語 / 地域オプションの 1 つ(この例では中国語)

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

ソース

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

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

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

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

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

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

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

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

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

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

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

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

  • すべては、すべての空白文字をドット(...)として表します。また、エディタは、タブ文字を行()として表します。
  • 末尾: 行末の空白文字が明るい赤でハイライト表示されます。
空白文字を表示: 選択済みのオプションは [すべて] と [末尾] です。
  • なし
  • すべて(...
  • 末尾

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

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

[Sources] パネルにプリプリントされたコード。
[Sources] パネルのナビゲーション ツリーの [Authored] セクションに .scss ファイルが表示されます。[Elements] パネルの [Styles] ペインには、CSS ルールの横に .scss ソースへのリンクが表示されます。

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

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

セキュリティ上の理由によりリモート ファイルパスからの読み込みが禁止されていることを示すメッセージがコンソールに表示されます。
デフォルトのインデント: オーバーライド オプションを無効にし、デフォルトのインデントを 2 つのスペースから 8 つに変更し、タブキーに変更しました。
  • 2 個のスペース
  • 4 個のスペース
  • 8 個のスペース
  • タブ文字

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

要素

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

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

ネットワーク

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

ログを保持] と同じです。ページの読み込みをまたいでリクエストを保存します。

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

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

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

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

Disable cache] と同じです。ブラウザ キャッシュを無効にします。

[Disable Cache] チェックボックス。

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

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

パフォーマンス

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

フレーム チャートのマウスホイール操作: ヒートマップのマウスホイール操作をスクロールからズームに変更。
  • スクロール
  • ズーム

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

Console

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

Console と設定画面のオプションは類似しています。

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

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

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

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

CORS エラーがログに記録され、コンソールに表示されます。

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

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

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

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

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

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

広告表示オプション

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

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

永続性

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

デバッガ

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

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

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

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

アドレスバーのアイコンと、DevTools の [ソース] の横にある警告アイコン。

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

コールスタック内の非同期オペレーション。

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

グローバル

このセクションでは、DevTools でグローバルに影響するオプションを示します。

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

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

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

同期

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