Chrome DevTools活用術：JavaScriptデバッグ＆パフォーマンス計測のコツ

本記事には広告が含まれています

2025/05/262025/05/30

Chrome DevTools活用術：JavaScriptデバッグ＆パフォーマンス計測のコツ

JavaScript のデバッグやパフォーマンス解析に欠かせない Chrome DevTools。

この記事では、ブレークポイントの使い分けから Gemini による AI アシスト、最新バージョンで追加された機能まで、活用テクニックをわかりやすく解説します。

初心者から中級者まで、開発効率を劇的に改善したい方は必見です。

はじめに ― Chrome 132 で“Gemini”が正式デビューしたワケ

Web アプリの複雑化に伴い、console.log だけでは見逃すバグやカクつきが増えました。

そんな中、Chrome 132（2025年5月時点・Stable予定）以降では AI アシスト機能 “Gemini” が DevTools に組み込まれ、Console・Recorder・Network パネルなどでエラー要因の推測や最適な計測手順を提案してくれます。

Gemini へ英文で「Why is this API call slow?」と尋ねるだけで、ボトルネック候補をコードやタイムライン付きで返すため、調査工数が一気に短縮できます。

ソースパネル基礎 ― ライン・条件付き・ログポイントを極める

ブレークポイントは「ライン／条件付き／ログポイント」の 3 つを覚えれば十分です。ラインは行番号をクリックするだけ、条件付きは Ctrl+クリック（Mac は Cmd+クリック）後に式を入力します。

ログポイントは「停止せず値だけを出力」する点が特徴で、行番号を右クリック → Add logpoint を選ぶ方法が最も確実です。

環境によっては Ctrl+Shift+クリックのショートカットが動作しない場合があるため、GUI 操作と併記しておくとチームメンバーにも親切です。
参考：Pause your code with breakpoints｜Chrome Developers Blog

// 例: 特定ユーザーのみ停止
if (user.role === 'admin') {
  updateDashboard();
}

// ログポイント用フォーマット
// ${variable} のように埋め込める

ブレークポイント早見表 ― 目的別に選ぶ

種類	主な用途	設定方法
ライン	基本的な挙動確認	行番号クリック
条件付き	特定ケースのみ停止	Ctrl/Cmd+クリック → 条件入力
ログポイント	停止せず値を確認	行番号右クリック → Add logpoint
DOM	ノード追加・削除検知	Elements › Break on
XHR/Fetch	API 呼び出しを検知	Sources › XHR/Fetch Breakpoints

イベント & DOM ブレークポイント ― UI バグの“再現しない問題”を解決

クリック・keydown 等でコードを自動停止するイベントリスナーブレークポイント、要素の削除や style 変更を検知するDOM ブレークポイントを組み合わせれば、「特定操作でだけ崩れる UI」の根本原因も特定できます。

Performance パネル ― 60 fps を奪う犯人を特定

Chrome 126 で追加されたトラックの並べ替え・非表示機能により、不要なノイズをカットして CPU・GPU のフレームタイムを集中して確認できます。

Core Web Vitals をリアルタイム表示する Live metrics も便利で、本番相当の負荷テストを再現可能です。

一方、Performance Insights パネルは将来的に廃止予定となり、主要機能は Performance パネルに統合されています。
参考：What’s new in DevTools (Cr-126)｜Chrome Developers Blog

Memory パネル ― JS ヒープの“じわ漏れ”を止める

「使うほど遅くなる……」症状はメモリリークの疑いがあります。Allocation トラッキングでスナップショットを 2 回以上撮り、Detached DOM Tree が増加し続けていないか確認しましょう。

Detached DOM Tree がメモリ内に多数残っている場合、不要になった DOM ノードの参照が JavaScript 側に残っている可能性が高いです。

listener の remove や null 代入で解放できるか検証しましょう。
参考：Resolve memory issues｜Chrome DevTools Docs

Lighthouse 12.6.0 & Recorder ― 品質監査と自動テストを同時に

Chrome 137（2025年5月時点・Canary版）以降、Lighthouse パネルは v12.6.0 に更新され、パフォーマンスカテゴリでインサイトレビューモードが試せます。
※インサイトレビューモードでは、各スコアに対する Google の改善提案をより詳細に可視化できます。

また、PWA カテゴリ廃止と SEO カテゴリ再編によりスコア分布が若干変化しました。Recorder パネルは Chrome 129 で Puppeteer for Firefox へのエクスポートに対応し、クロスブラウザ E2E テストを手軽に自動化できます。

本番相当のユーザーフローを記録 → Lighthouse で最適化提案 → Gemini に改善案を尋ねる、という“黄金ルート”を確立しておくと開発サイクルが高速化します。

参考：Recorder supports export to Puppeteer for Firefox｜Chrome Developers Blog
参考：Lighthouse changelog 12.6.0｜GitHub