# Chrome DevTools クイックリファレンス

*要素、コンソール、ネットワーク、パフォーマンス、デバッグ*

> Source: Chrome DevTools Documentation (developer.chrome.com/docs/devtools) · MIT

## 要素

### 検査と編集

| Command | Description |
|---------|-------------|
| `右クリック -> 検査` | 要素の Elements パネルを開く |
| `タグ/属性をダブルクリック` | HTML をインラインで編集 |
| `Delete キー` | 選択ノードを削除 |
| `Ctrl+Z` | DOM の変更を元に戻す |
| `H キー` | 選択要素の表示を切り替え |
| `ノードをドラッグ` | DOM ツリーで要素を移動 |

### スタイルパネル

| Command | Description |
|---------|-------------|
| `element.style {}` | 要素にインラインスタイルを追加 |
| `プロパティ値をクリック` | CSS 値をライブで編集 |
| `ルール横のチェックボックス` | CSS プロパティのオン/オフを切り替え |
| `:hov ボタン` | 疑似状態を強制（:hover、:focus） |
| `.cls ボタン` | CSS クラスを追加/削除 |
| `カラースウォッチ` | カラーピッカーを開く |
| `Computed タブ` | 最終的な計算済み CSS 値を表示 |

## コンソール

### Console API

```
console.log("info");          console.warn("warning");
console.error("error");       console.table(arrayOrObj);
console.group("label");       console.groupEnd();
console.time("t"); /*...*/ console.timeEnd("t");
```

### コンソールユーティリティ

| Command | Description |
|---------|-------------|
| `$0` | Elements で現在選択中の要素 |
| `$('sel') / $$('sel')` | querySelector / querySelectorAll の短縮形 |
| `copy(obj)` | オブジェクトを文字列としてクリップボードにコピー |
| `clear()` | コンソール出力をクリア |
| `monitor(fn)` | 関数 fn の呼び出しをログ記録 |
| `monitorEvents(el, 'click')` | 要素のイベントをログ記録 |
| `keys(obj) / values(obj)` | オブジェクトのキー / 値 |
| `$_ ` | 最後に評価した式の結果 |

### フィルタリング

| Command | Description |
|---------|-------------|
| `ログレベルのドロップダウン` | verbose/info/warn/error でフィルタ |
| `フィルターテキストボックス` | コンソール出力を検索 |
| `-url:extension` | ソース URL でメッセージを除外 |
| `context: ドロップダウン` | iframe/worker コンテキストでフィルタ |

## ネットワーク

### ネットワークパネルの機能

| Command | Description |
|---------|-------------|
| `フィルターバー` | 種別でフィルタ: XHR、JS、CSS、Img、Doc、WS |
| `検索（Ctrl+F）` | すべてのリクエスト/レスポンス本文を横断検索 |
| `ログを保持` | ページ遷移してもログを保持 |
| `キャッシュを無効化` | DevTools を開いている間ブラウザキャッシュをバイパス |
| `スロットリングのドロップダウン` | 低速 3G、高速 3G、オフラインをシミュレート |
| `リクエスト URL をブロック` | 右クリックでリクエスト → URL をブロック |

### リクエスト詳細タブ

| Command | Description |
|---------|-------------|
| `Headers` | リクエスト/レスポンスヘッダー、ステータスコード |
| `Payload` | POST 本文、クエリパラメーター |
| `Preview` | フォーマット済みレスポンス（JSON、HTML、画像） |
| `Response` | 生のレスポンス本文 |
| `Timing` | DNS、接続、TLS、TTFB、ダウンロード |
| `Initiator` | リクエストを発生させたスタックトレース |
| `Cookies` | 送受信された Cookie |

### コピーとエクスポート

| Command | Description |
|---------|-------------|
| `右クリック -> cURL としてコピー` | リクエストを cURL コマンドとしてコピー |
| `fetch としてコピー` | fetch() JavaScript としてコピー |
| `HAR をエクスポート` | すべてのリクエストを HAR ファイルとしてエクスポート |
| `レスポンスをコピー` | レスポンス本文をクリップボードにコピー |

## ソース

### ブレークポイント

| Command | Description |
|---------|-------------|
| `行番号をクリック` | 行ブレークポイントの切り替え |
| `右クリック -> 条件付き` | 式が true のときのみ停止 |
| `右クリック -> ログポイント` | 実行を一時停止せずにログ記録 |
| `DOM ブレークポイント` | サブツリー/属性/削除で停止 |
| `XHR/Fetch ブレークポイント` | URL が文字列を含むときに停止 |
| `イベントリスナーブレークポイント` | 特定のイベント種別で停止 |

### デバッガーコントロール

| Command | Description |
|---------|-------------|
| `F8 / Ctrl+\` | 実行を再開 / 一時停止 |
| `F10` | 次の関数呼び出しをステップオーバー |
| `F11` | 関数呼び出しにステップイン |
| `Shift+F11` | 現在の関数からステップアウト |
| `Ctrl+Shift+P -> "never pause"` | すべてのブレークポイントを無効化 |

### デバッグパネル

| Command | Description |
|---------|-------------|
| `Watch` | 式の値を監視 |
| `Scope` | ローカル、クロージャ、グローバル変数 |
| `Call Stack` | 関数呼び出しチェーン |
| `Snippets` | 再利用可能な JS コードを保存・実行 |

## パフォーマンス

### 記録

| Command | Description |
|---------|-------------|
| `Record ボタン（Ctrl+E）` | パフォーマンスの記録を開始/停止 |
| `Reload ボタン` | ページロードのパフォーマンスを記録 |
| `Screenshots チェックボックス` | ビジュアルタイムラインをキャプチャ |
| `CPU スロットルのドロップダウン` | 4x/6x の CPU 低速化をシミュレート |
| `ネットワークスロットル` | 記録中に低速ネットワークをシミュレート |

### フレームチャートの読み方

| Command | Description |
|---------|-------------|
| `Main トラック` | JavaScript の実行（フレームチャート） |
| `Network トラック` | ネットワークリクエストのタイムライン |
| `Frames トラック` | FPS とフレーム時間 |
| `Timings トラック` | FCP、LCP、DCL、Load マーカー |
| `黄色のバー` | JavaScript（スクリプティング） |
| `紫色のバー` | レイアウト / レンダリング |
| `緑色のバー` | ペイント / コンポジット |

### ボトムアップとサマリー

| Command | Description |
|---------|-------------|
| `Summary タブ` | 時間の内訳: スクリプティング、レンダリングなど |
| `Bottom-Up タブ` | コストの高い関数を上から表示 |
| `Call Tree タブ` | ルートから末端への呼び出し階層 |
| `Event Log タブ` | 時系列イベント一覧 |

## アプリケーション

### ストレージ

| Command | Description |
|---------|-------------|
| `Local Storage` | オリジンごとのキー/値ペアを表示・編集 |
| `Session Storage` | セッションスコープのストレージを表示・編集 |
| `IndexedDB` | オブジェクトストアとレコードを検査 |
| `Cookies` | ドメインごとの Cookie を表示・編集・削除 |
| `Cache Storage` | Service Worker のキャッシュを検査 |
| `ストレージをクリア` | 選択したストレージ種別を一括クリア |

### Service Workers とマニフェスト

| Command | Description |
|---------|-------------|
| `Service Workers` | 登録状況、ステータス、プッシュ/同期を表示 |
| `リロード時に更新` | リロードのたびに SW を強制更新 |
| `ネットワークにバイパス` | SW をスキップしてネットワークに直接アクセス |
| `Manifest` | Web アプリマニフェストの詳細を表示 |
| `Offline チェックボックス` | オフラインモードをシミュレート |

## Lighthouse

### 監査の実行

| Command | Description |
|---------|-------------|
| `Mode: Navigation` | フルページロード監査 |
| `Mode: Timespan` | 一定時間のユーザー操作を監査 |
| `Mode: Snapshot` | 現在のページ状態を監査 |
| `Categories` | パフォーマンス、アクセシビリティ、ベストプラクティス、SEO |
| `Device` | モバイルまたはデスクトップのシミュレーション |

### 主要指標

| Command | Description |
|---------|-------------|
| `FCP (First Contentful Paint)` | 最初のコンテンツが表示されるまでの時間 |
| `LCP (Largest Contentful Paint)` | 最大のビジュアル要素が表示されるまでの時間 |
| `TBT (Total Blocking Time)` | ロングタスクによるブロック時間の合計 |
| `CLS (Cumulative Layout Shift)` | 視覚的安定性スコア |
| `SI (Speed Index)` | コンテンツがどれだけ速く視覚的に表示されるか |
| `INP (Interaction to Next Paint)` | ユーザー入力への応答性 |

## ショートカット

### DevTools を開く

| Command | Description |
|---------|-------------|
| `F12 / Ctrl+Shift+I` | DevTools を開く/閉じる |
| `Ctrl+Shift+J` | Console パネルを開く |
| `Ctrl+Shift+C` | Elements を開いて検査モードに |
| `Ctrl+Shift+M` | デバイスツールバーを切り替え（レスポンシブ） |

### ナビゲーションと検索

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+P` | コマンドメニュー（任意のアクションを実行） |
| `Ctrl+P` | ファイルを開く（ファイルに移動） |
| `Ctrl+Shift+F` | すべてのソースを横断検索 |
| `Ctrl+G` | Sources で行番号に移動 |
| `Ctrl+[ / Ctrl+]` | パネルを切り替え |

### 編集とコンソール

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+D` | DevTools のドック位置を切り替え |
| `Ctrl+L（コンソール）` | コンソール出力をクリア |
| `Shift+Enter（コンソール）` | 複数行入力 |
| `Esc` | コンソールドロワーを切り替え |
| `Ctrl+K（コンソール）` | コンソールをクリア |

## モバイルデバッグ

### デバイスツールバー

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+M` | デバイスツールバーの切り替え |
| `デバイスのドロップダウン` | プリセットの電話/タブレットサイズ |
| `レスポンシブモード` | ビューポートを自由にリサイズ |
| `DPR のドロップダウン` | デバイスピクセル比を変更 |
| `スロットリング` | モバイル CPU とネットワークをシミュレート |
| `メディアクエリを表示` | CSS ブレークポイントを可視化 |

### リモートデバッグ（Android）

| Command | Description |
|---------|-------------|
| `1. USB デバッグを有効化` | デバイスの設定 → 開発者オプション |
| `2. USB で接続` | Android デバイスをコンピューターに接続 |
| `3. chrome://inspect` | デスクトップの Chrome で開く |
| `4. 検査をクリック` | モバイルページの DevTools を開く |

*デスクトップと Android デバイスの両方で Chrome が必要*

### センサーのオーバーライド

| Command | Description |
|---------|-------------|
| `Geolocation` | GPS 座標を上書き |
| `Orientation` | デバイスの向きをシミュレート |
| `Touch` | タッチイベントをシミュレート |
| `Idle detection` | アイドル検出 API を上書き |

## よくあるパターン

### ネットワーク問題のデバッグ

```
// コンソールですべての fetch リクエストを監視
const origFetch = window.fetch;
window.fetch = (...args) => {
  console.log('fetch:', args);
  return origFetch(...args);
};
```

### パフォーマンスのワークフロー

| Command | Description |
|---------|-------------|
| `1. Lighthouse 監査` | 主要なパフォーマンス問題を特定 |
| `2. パフォーマンス記録` | フレームチャートでロングタスクを探す |
| `3. Coverage タブ` | 未使用の CSS/JS を探す（Ctrl+Shift+P -> Coverage） |
| `4. ネットワーク ウォーターフォール` | ブロッキングリソースを特定 |
| `5. Rendering タブ` | ペイント/レイアウトを可視化（Ctrl+Shift+P -> Rendering） |

### 便利なコンソールスニペット

```
// 要素のすべてのイベントリスナーを一覧表示
getEventListeners($0);

// レイアウトシフトを監視
new PerformanceObserver(l => l.getEntries().forEach(
  e => console.log('CLS:', e)
)).observe({ type: 'layout-shift', buffered: true });
```