Chrome DevTools を極めた私が毎日使う、知られざる10の機能

DevToolsの画面に表示されていない機能が、実は成果に最も効くことがあります。意外に思われるかもしれませんが、日々の開発で本当に頼りになるのはツールバーのボタンではなく、計測・再現・自動化を地味に支える機能群です。複雑化するフロントエンドでは、症状の観察に時間を使うより、原因に最短で到達できる導線の有無が生産性を左右します。そこで、コマンド中心の操作、ユーザータイミングの可視化、ネットワークの制御、そしてテストの自動化を組み合わせて運用すると、調査から修正までの往復を短縮しやすくなります。今回は、毎日使うのにあまり語られない10の機能を、実例とともに紹介します。チーム規模が大きいほど効果が波及しやすく、レビューや検証の往復を減らすことで、リリースリスクの低減にもつながります。

計測と可視化で「原因」を秒で突き止める

パフォーマンスの議論は抽象になりがちですが、ユーザータイミング（アプリに埋め込む任意の計測ポイント）とプロファイリング（PerformanceパネルでのCPUやレイアウトの分析）を結びつけると、論点が行動に変わります。まず強調したいのは、PerformanceパネルとUser Timingの連携¹²です。アプリ側で任意のポイントにマークを打ち、区間を計測してからプロファイルを採取すると、コールスタックや割当（関数の呼び出し経路やメモリ割り当て）のボトルネックが、ビジネス的に意味のある単位で切り出されます。コードは簡潔で、副作用もありません。

// ユーザー操作の開始と終了を明示して計測
performance.mark('cart:add:start');
// ここで状態更新やAPI呼び出しが走る
await addToCart(productId);
performance.mark('cart:add:end');
performance.measure('cart:add', 'cart:add:start', 'cart:add:end');

// 任意: 臨時の壁時計計測も併用
tablePerformance = (name, fn) => {
  console.time(name);
  const r = fn();
  console.timeEnd(name);
  return r;
};

この状態でPerformanceパネルを記録すると、Measuresのタイムラインにcart:addというラベル付きの区間が載り、関連スクリプトやレイアウトが一目で追えます¹²。曖昧な「重い」ではなく、「在庫チェックの同期関数がボトルネック」といった具体に落とし込めるため、修正の優先順位が明確になります。

不要なコードが読み込まれているなら、Coverageを常用に切り替えます。コマンドメニューから Show Coverage を呼び出すと、実行されなかったバイトがリアルタイムに集計され、遅延読み込みの候補やCSSの削減余地が数字で見えてきます³⁴。運用例としては、ユーザーフローをRecorderで再生しながらCoverageを確認し、バンドル分割の判断を行う、という使い方が有効です。要素の見た目が崩れることを恐れて削れないときは、対象コンポーネントのStoryを起こし、そこに限定したCoverageで未使用スタイルを洗い出すと安全です。

レイアウトの揺れに悩まされるUIでは、RenderingタブのLayout Shift Regionsを表示して可視化するのが早道です⁵。CLS（Cumulative Layout Shift。予期せぬレイアウト移動の指標）はスクロールや非同期データで見落としがちですが、領域のハイライトが出るだけで責任箇所の当たりがつきます。コードからも気配を検知したいなら、Layout Instability APIを使ってログを残す方法があります⁶。

// 目視の補助としてCLS候補をログ出力
let cls = 0;
const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('layout-shift', entry.value, entry);
    }
  }
});
po.observe({ type: 'layout-shift', buffered: true });
window.__getCLS = () => cls;

開発中はRenderingタブでシフト領域を見つつ、コンソールの window.__getCLS() で進捗を数字で追うと、視覚と数値の両輪で改善が進みます。UI変更のレビュー時にも、単なるスクショではなく、CLSの差分を会話の材料にできます。

コンソール中心のデバッグで機動力を上げる

DevToolsのCommand Menuは、日常操作のハブです⁷。MacはCommand+Shift+P、Windows/LinuxはCtrl+Shift+Pで開き、欲しい機能名をそのまま打ち込みます。面倒なパネル遷移や三点メニューを辿る時間が消え、Show Coverage、Open Recorder、Show Rendering、Disable JavaScriptなどを名前で即座に呼び出せます。たとえば録画、計測、カバレッジ、表示の切り替えをキーボードだけで回すと、作業中の集中を乱しにくくなります。

状態監視に強力なのが、コンソールのLive Expressionです。右上の目玉アイコンから式を追加し、値の変化を常時表示にできます。例えば、SPAのルーター状態、メモリ使用量、特定ノード数の推移などを、記録中も視界の端で追えます。式は簡単で構いません。

// 例: Lazyロード中の画像枚数、メモリ、現在のルート
[...document.querySelectorAll('img[loading="lazy"]')].filter(i => !i.complete).length
performance.memory?.usedJSHeapSize
window.router?.currentRoute?.fullPath

さらに差が出るのが、Console Utilities APIの活用です⁸⁹。アプリを書き換えずに関数やイベントを観察・介入できます。特定関数の呼び出しを追いたいときは monitor や debug、イベントの嵐を俯瞰したいときは monitorEvents、選択要素のリスナー構成を知りたいときは getEventListeners が便利です。クリップボードにすばやく抜き出すなら copy も重宝します。

// 呼び出しログを自動で出力
monitor(window.fetch);
// ある関数のブレークポイントを即座に有効化
debug(myStore.dispatch);
// 選択中要素($0)のイベントを観測
monitorEvents($0, ['click','input']);
// 付与されているイベントリスナーの内訳を確認
getEventListeners($0);
// DOM断片や計測結果をすぐ共有
copy($0.outerHTML);

この一連のユーティリティは、コードパスを汚さずに現象と原因の橋渡しをしてくれます。レビューや調査のスクリーンキャストでは、Live Expressionとmonitor系のログを同時に映すだけで、経緯の説明が具体化します。

ネットワークと環境を現場レベルで再現する

バックエンドやCDNの設定が絡む問題は、フロントエンドの手元で再現性を持たせることが解決の半分を占めます。まず試したいのは、NetworkパネルのRequest Blockingです¹⁰。パターンを指定して広告・A/B・外部SDKを仮に遮断し、パフォーマンス・エラーハンドリング・依存関係の健全性を切り分けます。遮断の効果は、軽いテストコードでも確かめられます。

// ブロックの有無でフォールバックが動作するかを確認
async function probe() {
  try {
    const r = await fetch('https://example-cdn/sdk.js', { mode: 'no-cors' });
    console.log('sdk reachable', r.type);
  } catch (e) {
    console.log('sdk blocked, fallback path active');
  }
}
probe();

依存の遮断で症状が消える場合は、初期化順序やロード戦略の見直しが必要だと判断しやすくなります。逆に症状が残るなら、アプリ側のライフサイクルやメモリに焦点を移せます。試行回数を減らせるだけで、調査のストレスは下がりがちです。

中規模以上の開発で特に有効なのが、SourcesのLocal Overridesです¹¹¹²（適用時はキャッシュが自動で無効化されます¹¹）。ネットワークから届くレスポンスを、ローカルのフォルダに保存したファイルで置き換えられます。Feature Flagを切り替えたい、バックエンド未実装のエラー系を先に作りたい、A/Bのバリアントを固定したい、といったケースで擬似サーバーのように扱えます。例えばAPIの成功レスポンスを意図的にエラーに変え、UIの回復性とトラッキングを先行で検証できます¹²。

// 本番APIの例 (成功)
{
  "status": "ok",
  "items": [{"id": 1, "name": "A"}]
}

// Overridesで差し替えるレスポンス (エラー)
{
  "status": "error",
  "code": "E_TIMEOUT",
  "message": "Gateway timeout"
}

同じURLに対して上記のJSONをマッピングすると、UIは即座にエラーパスに入り、トーストやリトライ、メトリクス送信が正しく動くかをローカルで確かめられます。ネットワーク条件の変更やキャッシュの有無も合わせて試すことで、障害時の顧客体験まで含めたレビューが可能になります。

自動化と再現性でチームの速度を底上げする

機能実装が速くても、検証や説明の往復で時間を失うと総合力は上がりません。そこで活躍するのが、SourcesにあるSnippetsと、専用パネルになったRecorderです。Snippetsは再利用可能な小さなスクリプトの保管場所で、どのオリジンのページでも同じ動作を呼び出せます¹³。よく使われるのは、クリックで要素を強調する軽量なオーバーレイや、計測対象ノードの可視化です。

// Snippet: クリックした要素を一時的に強調表示
(() => {
  const css = `
    .__outline__{outline: 2px solid #ff0066 !important; outline-offset: 2px !important;}
  `;
  const s = document.createElement('style');
  s.textContent = css; document.head.appendChild(s);
  const onClick = (e) => {
    document.querySelectorAll('.__outline__').forEach(n => n.classList.remove('__outline__'));
    e.target.classList.add('__outline__');
  };
  window.addEventListener('click', onClick, { capture: true });
  console.log('Outline snippet active. Reload to stop.');
})();

視覚的な議論が必要なレビューで、この手のスニペットは驚くほど効果的です。指差し確認がそのまま画面上ででき、非同期でのコミュニケーションコストを減らせます。パフォーマンス検証では、User Timingと組み合わせたログ集計スニペットを用意しておくと、どの画面でも同じ指標が採れます。

ユーザーフローの再現と共有には、Recorderが頼りになります。記録ボタンを押して実際の操作を一度なぞれば、クリック、入力、ナビゲーションがタイムスタンプ付きで保存されます。記録したフローは繰り返し再生でき、回帰の検出、計測の安定化、バグ再現の説明に使えます¹⁴。さらにエクスポートでPuppeteerやJSONのステップに変換できるので、E2Eテストの叩き台や監視ジョブの雛形にもなります¹⁵。手元の仮説検証を短時間で自動化に接続できる点は、プロセス改善の観点でも価値があります。

ここまで紹介した内容を振り返ると、毎日使うのに目立たないが、使うほど効果が積み上がる機能に共通点があります。まず、Command Menuで機能を指名呼び出しし、PerformanceのUser Timingで意図した単位を計測し、Coverageで不要を削り、RenderingのLayout Shift RegionsでUIの安定性を見せ、Live Expressionで状態を見張り、Console Utilities APIで関数とイベントの挙動を暴き、Request Blockingで依存を切り分け、Local Overridesで未実装や障害を先回りし、Recorderでフローを固定化し、Snippetsでチームの観察力を共有資産に変える。どれも単体で完結しますが、つなげると相乗効果が生まれます。

ビジネスへの波及を設計に織り込む

技術の仕組みは手段であり、価値は開発フローの摩擦が減ったときに生まれます。例えば、User Timingでビジネス行為に名前を付け、Recorderでその行為を再現性のある資産にし、Coverageで無駄を削る。この三点セットだけでも、コードレビューでの議論が「感じ」から「数値」に寄り、意思決定の速度が上がりやすくなります。導入のコストは低く、追加のツールチェーンも必須ではありません。こうした運用に寄せるだけで、バグの再現・説明・修正の往復は短くなることが多いはずです。成果指標の改善は、単なるツールの知識ではなく、機能をどう束ねて仕事の流れに乗せるかで決まります。

まとめ：隠れた道具を仕事の流れに組み込む

毎日のように開いているツールでも、視点が変わると景色が変わります。DevToolsは、ボタンの集合ではなく、計測と再現と自動化を編むための箱だと捉えると、使い道が一段広がります。あなたの現場でまず試してほしいのは、User Timingを入れてプロファイルに意味のある名前を載せること、Command Menuで操作の往復を断つこと、そしてRecorderとLocal Overridesでフローと障害を手元で固定化することです。三つを同時に回し始めると、検証の会話が具体化し、レビューや説明の摩擦が減ります。

今日のプロジェクトで、どの一手から始めますか。手元の課題に直結する機能を一つ選び、10分だけでも試してみてください。小さな時間短縮が積み重なると、来月のリリースリスクやチームの余白に確実な差が生まれます。隠れた道具を自分の現場に合わせて調律し、速度と品質の両立を日常の標準にしていきましょう。

参考文献

MDN Web Docs. Performance.mark(). https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark#:~:text=The%20,in%20the%20browser%27s%20performance%20timeline
MDN Web Docs. Performance.measure(). https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure#:~:text=The%20,in%20the%20browser%27s%20performance%20timeline
Chrome Developers. Find unused JavaScript and CSS with Coverage. https://developer.chrome.com/docs/devtools/coverage/?ref=john-papa#:~:text=This%20style%20sheet%20doesn%27t%20just,problem%20for%20the%20following%20reasons
Chrome Developers. Coverage panel overview. https://developer.chrome.com/docs/devtools/coverage/?ref=john-papa#:~:text=The%20Coverage%20panel%20helps%20you,mobile%20data%20of%20your%20users
web.dev. Debug layout shifts in the field. https://web.dev/articles/debug-layout-shifts#:~:text=You%20can%20debug%20Layout%20Shifts,a%20more%20easily%20digestible%20format
web.dev. Code snippet to observe layout shifts. https://web.dev/articles/debug-layout-shifts#:~:text=The%20same%20code%20snippet%20,how%20a%20layout%20shift%20occurred
Chrome Developers Blog. DevTools Digest: Command Menu. https://developer.chrome.com/blog/devtools-digest-command-menu#:~:text=Hit%20,sample%20actions%20you%20could%20try
Chrome Developers. Console Utilities API: monitor(). https://developer.chrome.com/docs/devtools/console/utilities/#:~:text=monitor
Chrome Developers. Console Utilities API: debug(). https://developer.chrome.com/docs/devtools/console/utilities/#:~:text=debug
Chrome Developers. Block network requests. https://developer.chrome.com/docs/devtools/network-request-blocking#:~:text=The%20Network%20request%20blocking%20panel,the%20Network%20request%20blocking%20panel
Chrome Developers. Local overrides disables cache. https://developer.chrome.com/docs/devtools/overrides/#:~:text=,Local%20overrides%20automatically%20disables%20cache
Chrome Developers. Mock XHR and fetch with local overrides. https://developer.chrome.com/docs/devtools/overrides/#:~:text=Use%20local%20overrides%20to%20mock,including%20XHR%20and%20fetch%20requests
Chrome Developers Blog. Predefined Snippets in DevTools. https://developer.chrome.com/blog/predefined-snippets/#:~:text=A%20feature%20called%20Snippets%20is,To%20try%20it
Chrome Developers. Recorder: Replay a user flow. https://developer.chrome.com/docs/devtools/recorder/#:~:text=After%20recording%20a%20user%20flow%2C,Replay%20button
Chrome Developers. Recorder: Measure a user flow. https://developer.chrome.com/docs/devtools/recorder/#:~:text=Measure%20a%20user%20flow