ChromeのDevToolsで知っておきたい機能5選

1. $0 — Elements で選んだ要素をConsoleから操作

Elementsパネルで要素を選択すると、Consoleで $0 としてアクセスできる。スタイルの動的変更やサイズ確認に使う。

// Elementsで要素を選んでからConsoleで入力
$0.style.border = "2px solid red";     // 見た目を確認
$0.getBoundingClientRect();            // 位置とサイズを確認
$0.textContent = "テスト";            // テキストを書き換えてみる

// $$ は querySelectorAll の省略形
$$("a[href^='https']").length;         // 外部リンクの数をカウント

2. console.table() と console.time() — ログを見やすく

console.log より状況に応じたメソッドを使うと格段に読みやすくなる。

// 配列・オブジェクトをテーブル表示
const users = [
  { id: 1, name: "Alice", role: "admin" },
  { id: 2, name: "Bob", role: "user" },
];
console.table(users);  // 列名付きの表で表示

// 処理時間を計測
console.time("fetch");
const res = await fetch("/api/users");
console.timeEnd("fetch");  // → fetch: 123.4ms

// オブジェクトのスナップショット（参照ではなくコピーで記録）
console.log(JSON.parse(JSON.stringify(state)));

3. Force State — ホバー・フォーカス状態を固定してCSSを調整

:hover や :focus のスタイルはマウスを動かすと消えてしまい、DevToolsで確認しにくい。Force Stateで固定すれば、ゆっくり編集できる。

操作方法: Elementsパネルで要素を右クリック → Force state → :hover / :focus / :active を選択

または Elementsパネルの :hov ボタンからもチェックできる。

ドロップダウンメニューが消えてしまいスタイルを確認できない問題も、これで解決できる。

4. Logpoints — コードを変更せずにログを仕込む

ソースファイルを変更せずに console.log 相当のログを差し込める。チームへの影響なしにデバッグできる。

操作方法: SourcesパネルでJSファイルを開き、行番号を右クリック → Add logpoint → 式を入力

// Logpointに入力する式の例
"user:", user, "state:", state
"api called with:", JSON.stringify(params)

ブレークポイントと違い実行は止まらず、コンソールにだけ出力される。本番同等の環境（minified JS）でも使用できる。

5. Networkのスロットリングとタイミング確認

デスクトップから「Slow 3G」や「Offline」を再現してパフォーマンスを確認できる。

操作: Networkタブ → 「No throttling」プルダウン → Slow 4G / Offline を選択

また、リクエストをクリックして Timing タブを開くと、DNS解決・TCP接続・TTFB・ダウンロードの内訳が確認できる。

TTFB（Time to First Byte）が大きい → サーバー側の処理が遅い
Content Download が大きい → レスポンスサイズが大きい（圧縮・分割を検討）
Waiting → キューイングされている（HTTP/2接続多重化や並列数を確認）

Initiator 列をクリックすると、そのリクエストを発行したコードのスタックトレースが見られる。「このAPIはどこから呼ばれているか」をすぐに特定できる。

---

参考: Chrome DevTools 公式ドキュメント