Chrome DevToolsの隠れた機能

おそらく、あなたは1日に何十回もChrome DevToolsを開いているでしょう。Console、Elements、Network — いつものループです。しかし、DevToolsは静かに、はるかに強力な環境へと成長しており、その最高の機能のほとんどは、多くの開発者が探索を止めてしまう場所から、もう1つメニューを深く掘り下げたところにあります。

ここでは、日常のワークフローに追加する価値のある、あまり知られていないChrome DevToolsの機能を紹介します。

CSS Overview:スタイルシートのヘルスチェック

開き方: 3点メニュー(⋮)→ More Tools → CSS Overview

キャプチャを実行すると、ページ上のすべての色、フォントファミリー、フォントサイズ、メディアクエリ、詳細度の問題の完全な内訳が表示されます。大規模なコードベースでは、#fffと#ffffffのようなほぼ重複した色や、詳細度が高すぎてクリーンにオーバーライドできないセレクタを見つけるのに非常に有用です。

Font Infoセクションは特に便利です — 実際にレンダリングされているフォントサイズとウェイトの分布が表示され、デザイントークンが防ぐはずだった不整合が明らかになることがよくあります。

ヒント: デザインシステムのリファクタリング前にCSS Overviewを使用してください。整理を始める前に、混乱の明確な全体像が得られます。詳細については、公式のCSS Overviewドキュメントを参照してください。

高度なChrome DevToolsデバッグ:console.logよりもLogpoints

ソースコードにconsole.logを散らかすのはやめましょう。Sourcesパネルで、任意の行番号を右クリックしてAdd Logpointを選択します。任意の式を入力すると、コードに触れることなくコンソールにログが出力されます。

これは、最も活用されていないChrome DevToolsデバッグテクニックの1つです。Logpointsはホットリロードに耐え、再デプロイを必要とせず、完了時にはきれいに消えます。Conditional Breakpoints(右クリック → Add Conditional Breakpoint)と組み合わせると、特定の式がtrueの場合にのみ実行を一時停止できます — ループの50回目の反復後にのみ現れる断続的なバグのデバッグに便利です。

Coverageタブ:未使用コードの発見と削除

開き方: 3点メニュー → More Tools → Coverage

記録を開始し、ページを操作してから停止します。DevToolsは、各JSおよびCSSファイルの何パーセントが実行されなかったかを正確に表示します。60〜70%が未使用のファイルは、コード分割または遅延読み込みの候補です。

ワークフローは簡単です:Coverage → デッドコードの特定 → 分割または遅延 → LCPとTTIの改善を測定。これはCore Web Vitalsスコアに直接影響します。

ヒント: Coverageは、インタラクションによってトリガーされるコードを考慮しません。ページ読み込み時だけでなく、主要なユーザーフローをクリックしながら記録してください。

Performanceパネルのインサイト:レイアウトシフトとスタイル再計算のデバッグ

Performanceパネルは大幅に成熟しました。セッションを記録して、Main threadの内訳、特にStyle RecalcとLayoutイベントを確認してください。親要素の単一のCSSプロパティ変更が、数百のDOMノード全体で完全なレイアウト再計算をトリガーする可能性があります。

CLSデバッグの場合、記録前にRenderingドロワー(3点メニュー → More Tools → Rendering)を介してLayout Shift Regionsを有効にします。シフトした要素は青いオーバーレイでフレームごとにハイライトされ、どの要素がいつ移動したかがすぐに明らかになります。

ループ内でoffsetHeightやgetBoundingClientRect()などのレイアウトプロパティをクエリするのは避けてください — 各呼び出しは同期レイアウトを強制し、すぐに複合的に増加します。

Network Conditionsパネル:詳細なリクエストシミュレーションとトレース

ほとんどの開発者は、Networkタブのグローバルネットワークスロットリングについて知っています。しかし、3点メニュー → More ToolsからアクセスできるRequest BlockingとNetwork Conditionsパネルについて知っている人は少ないです。

Network Conditionsパネルでは、ユーザーエージェントをオーバーライドし、キャッシュをグローバルに無効化できます。ネットワークスロットリング自体は通常、Networkタブのスロットリングドロップダウンから制御され、テスト用に低速接続をシミュレートします。DevToolsの新しいバージョンでは、リクエスト条件ツールを通じて、より詳細なリクエストレベルのスロットリングもサポートしています。

Request Blocking(More Tools → Network Request Blocking)では、特定のURLパターンを完全にブロックできます — 特定のサードパーティスクリプトの読み込みに失敗した場合のアプリの動作をテストするのに便利です。

リクエストがコード内のどこから発生しているかをトレースするには、Networkタブで任意のリクエストをクリックし、Initiatorタブを開きます。リクエストをトリガーした正確なコールスタックが表示されます — 不慣れなAPI呼び出しをリバースエンジニアリングしたり、fetchが予期せず発火している場所を追跡したりする迅速な方法です。

まとめ

上記の機能は、単に目立たないだけではありません — 代替手段よりも速く実際の問題を解決します。CSS Overviewは手動のスタイルシート監査に取って代わります。Logpointsは使い捨てのconsoleステートメントに取って代わります。Coverageはバンドル最適化を推測的ではなく具体的にします。

最高のChrome DevToolsデバッグテクニックには1つの共通点があります:「何かがおかしい」と「何が悪いのか正確にわかる」の間のギャップを減らすことです。このリストから1つの機能を選んで、ワークフローに組み込んでください。残りは自然と続くでしょう。

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.