1.3 設定とカスタマイズ

Settings and Customization

DevToolsは多くの設定オプションを提供している。テーマの変更、実験的機能の有効化、パネルのカスタマイズなど、自分の作業スタイルに合わせて調整できる。

設定画面を開く

方法 説明
F1 最も簡単な方法
歯車アイコン DevTools右上の設定アイコンをクリック
Ctrl+Shift+P → "Settings" コマンドパレットから

Preferences（基本設定）

Appearance（外観）

設定 説明
Theme System preference / Light / Dark から選択
Panel layout パネルの配置（auto / horizontal / vertical）
Color format 色の表示形式（hex / rgb / hsl）
Enable Ctrl+1-9 shortcuts 数字キーでパネル切り替え

Sources（ソース設定）

設定 説明
Search in anonymous and content scripts 拡張機能のスクリプトも検索対象に
Automatically reveal files in sidebar ファイルを開くとサイドバーで自動選択
Enable JavaScript source maps ソースマップを有効化（デバッグ時に元のコードを表示）
Enable CSS source maps CSSソースマップを有効化（Sass/Less等の元ファイル表示）
Allow scrolling past end of file ファイル末尾を超えてスクロール可能に
Detect indentation インデントを自動検出
Autocompletion コード補完を有効化
Bracket matching 対応する括弧をハイライト
Code folding コードの折りたたみを有効化
Show whitespace characters 空白文字を可視化
Default indentation インデント幅（2 / 4 / 8スペース / タブ）

Elements（要素設定）

設定 説明
Show user agent shadow DOM ブラウザ内部のShadow DOMを表示
Word wrap 長い行を折り返し
Show HTML comments HTMLコメントを表示
Reveal DOM node on hover ホバー時にDOMノードをハイライト
Show detailed inspect tooltip 詳細なツールチップを表示

Network（ネットワーク設定）

設定 説明
Disable cache (while DevTools is open) DevTools起動中はキャッシュ無効化
Preserve log ページ遷移でもログを保持
Record network log ネットワークログの記録
Color-code resource types リソースタイプを色分け
Group network log by frame フレームごとにグループ化

Console（コンソール設定）

設定 説明
Hide network messages ネットワークエラーを非表示
Log XMLHttpRequests XHRリクエストをログ出力
Show timestamps タイムスタンプを表示
Autocomplete from history 履歴からオートコンプリート
Group similar messages in console 同じメッセージをグループ化
Show CORS errors in console CORSエラーを表示
Eager evaluation 入力中に結果をプレビュー

Experiments（実験的機能）

Experimentsタブには、開発中の新機能が含まれている。安定していない場合があるため、注意して使用する。

注意 Experiments機能は予告なく変更・削除される可能性がある。本番環境での使用は推奨されない。

有効化の手順

操作手順

  1. Settings → Experiments タブを開く
  2. 有効にしたい機能にチェックを入れる
  3. DevToolsを閉じて再度開く（またはCtrl+Shift+Iを2回押す）

便利なExperiments例

機能名 説明
Enable new Performance panel 新しいPerformanceパネルUI
Protocol Monitor Chrome DevTools Protocol通信を監視
CSS Overview ページのCSS統計情報を表示

Workspace（ワークスペース）

ローカルフォルダをDevToolsに接続し、変更を直接ファイルに保存する設定。詳細は4.3 Workspacesを参照。

Folder exclude pattern

Workspaceから除外するフォルダを正規表現で指定。デフォルトではnode_modules、.gitなどが除外されている。

Shortcuts（ショートカット設定）

キーボードショートカットのプリセットを選択できる。

プリセット 説明
DevTools (Default) 標準のDevToolsショートカット
Visual Studio Code VS Code風のショートカット

各ショートカットは個別にカスタマイズも可能。編集アイコンをクリックして新しいキーバインドを設定できる。

Ignore List（無視リスト）

デバッグ時にステップ実行をスキップするスクリプトを設定。サードパーティライブラリの内部コードをスキップしたい場合に有用。

デフォルトの無視パターン

  • /node_modules/
  • /bower_components/
  • Chrome拡張機能のスクリプト

カスタムパターンの追加

操作手順

  1. Settings → Ignore List を開く
  2. 「Add pattern...」をクリック
  3. 無視したいスクリプトのパターンを正規表現で入力
// 例: jQueryのファイルを無視
/jquery.*\.js$/

// 例: vendor フォルダ内を無視
/vendor\//

Devices（デバイス設定）

デバイスモードで使用するデバイスのプリセットを管理。カスタムデバイスの追加も可能。

カスタムデバイスの追加

操作手順

  1. Settings → Devices を開く
  2. 「Add custom device...」をクリック
  3. デバイス名、画面サイズ、DPR、User Agentを入力
  4. 「Add」をクリック

Throttling（スロットリング設定）

ネットワーク速度とCPU性能を制限するプリセットを管理。カスタムプロファイルの追加も可能。

カスタムプロファイルの例

設定項目 説明
Profile Name プロファイルの名前
Download (kb/s) ダウンロード速度
Upload (kb/s) アップロード速度
Latency (ms) 遅延時間

Locations（位置情報設定）

Geolocation APIのモックに使用する位置情報のプリセットを管理。

カスタム位置の追加

操作手順

  1. Settings → Locations を開く
  2. 「Add location...」をクリック
  3. 名前、緯度、経度、タイムゾーン、ロケールを入力

Sync（設定の同期）

DevToolsの設定をGoogleアカウントと同期できる。複数のデバイス間で同じ設定を使用したい場合に便利。

同期される設定 テーマ、キーボードショートカット、Experiments設定、Ignore List、カスタムデバイスなど。ただし、Workspaceのフォルダ設定はローカルマシン固有のため同期されない。

おすすめ設定

開発効率向上のための推奨設定

設定 推奨値 理由
Theme Dark 長時間の作業で目の負担軽減
Disable cache ON 常に最新のファイルを読み込み
Preserve log ON ページ遷移時のログを追跡
Enable source maps ON minify前のコードでデバッグ
Show timestamps ON ログの発生時刻を把握
Ignore List ライブラリを追加 デバッグ時に不要なコードをスキップ
参考文献
[1] Settings reference - Chrome DevTools. developer.chrome.com
[2] Customize keyboard shortcuts - Chrome DevTools. developer.chrome.com