【難解なバグに終止符】DevToolsの「XHR/fetch Breakpoints」で非同期通信の実行タイミングを完全に制御する
フロントエンド開発において、「なぜかAPIが叩かれる前にレンダリングが走る」「状態更新の競合（Race Condition）でUIがフラッシュする」といった現象に頭を抱えたことはないだろうか。
多くのエンジニアは `console.log` を乱射し、非同期の迷宮を彷徨う。しかし、ブラウザの DevTools に備わった 「XHR/fetch Breakpoints」 を使いこなせば、非同期処理の実行タイミングを物理的に掌握し、バグを「発生したその瞬間」に凍結できる。
今回は、単なる機能紹介ではない。テックリードとして、この機能を極限まで使い倒し、開発のデバッグコストを極小化するための「プロの思考法」を伝授する。
—
1. なぜ「XHR/fetch Breakpoints」が最強の武器なのか
通常、非同期処理は「結果が返ってきた後」を追跡しがちだ。しかし、真に追うべきは「リクエストが発行される瞬間」と「レスポンスがスレッドに返される瞬間」のコンテキストだ。
XHR/fetch Breakpointsは、特定のURLパターンや文字列を含む通信が発生した瞬間、JSの実行スタックを完全に停止させる。これにより、「どのコンポーネントのどの関数が、どのような引数でその非同期処理をキックしたのか」を、コールスタックを遡るだけで特定できる。
実践：競合状態（Race Condition）の封じ込め
非同期のレースコンディションは、複数の通信が非決定論的な順序で戻ることで発生する。
1. Sourcesパネルの「XHR/fetch Breakpoints」を開く。
2. `+` を押し、APIのパスの一部（例: `/api/v1/user-data`）を入力する。
3. リクエストが発生した瞬間にJSが止まる。このとき、「Call Stack」パネルで呼び出し元を遡る。
もし、意図せぬタイミングで同じAPIが2回叩かれているなら、スタックトレースがその犯人（Reactの `useEffect` の依存関係ミスや、再レンダリングの連鎖）を即座に暴き出す。
—
2. 開発スピードを加速させる「神」ショートカット
マウス操作でパネルを行き来するのは非効率だ。DevToolsをキーボードだけで操り、思考を中断させないのが一流の条件である。
| 操作 | ショートカット (Mac/Win) | 効能 |
| :— | :— | :— |
| コマンドパレットを開く | `Cmd+Shift+P` / `Ctrl+Shift+P` | あらゆる機能を瞬時に呼び出す（必須） |
| ステップオーバー | `F10` | 非同期のコールバックへ迷い込まず処理を追う |
| ステップイン | `F11` | 非同期処理の内部ロジックを深掘りする |
| 一時停止の解除 | `F8` | 調査が終わったら即座に再開 |
プロのTips: `Cmd+Shift+P` で「Debugger」と入力し、「Pause on exceptions」を常にオンにする習慣をつけろ。XHRブレークポイントと組み合わせることで、エラーハンドリングの不備も同時に補足できる。
—
3. チーム開発で役立つ「設定の共有化」とベストプラクティス
個人のローカル設定だけで終わらせるな。チーム全員のデバッグ環境を統一することで、バグ調査の「再現性」が劇的に向上する。
JSONによる設定の資産化（Snippet活用）
頻繁に使うデバッグ用コードは、DevToolsの「Snippets」に保存し、GitHubリポジトリの `scripts/debug` ディレクトリにコミットせよ。
{
“name”: “api-trace-logger.js”,
“description”: “主要APIのレスポンスをコンソールに強制出力するデバッグスニペット”,
“content”: `
// XMLHttpRequestとfetchをフックして、ログを詳細化する
const originalFetch = window.fetch;
window.fetch = async (…args) => {
console.log(‘%c[API Request]’, ‘color: #007acc; font-weight: bold’, args[0]);
const response = await originalFetch(…args);
console.log(‘%c[API Response]’, ‘color: #28a745; font-weight: bold’, response.clone());
return response;
};
`
}
これをチームで共有すれば、「このAPI、何が返ってきているか確認して？」というコミュニケーションが不要になる。
—
4. 推奨する「神」プラグイン
DevToolsの標準機能だけで戦うのは美学だが、生産性を最大化するために以下のツールは導入を検討すべきだ。
- React Developer Tools / Redux DevTools:
非同期処理の結果が「状態（State）」に反映される過程を可視化する。XHRブレークポイントで止めた後、これらのツールでStateの変化を確認するのが「黄金のデバッグフロー」だ。
- Requestly:
本番環境の特定のAPIレスポンスをローカルのモックに差し替える。XHRブレークポイントで処理を止めつつ、レスポンスを細工して「エッジケース（タイムアウト、500エラー、不正なJSON）」のUI挙動を即座にテストできる。
—
5. テックリードからの提言：デバッグは「追体験」である
バグを解決するとは、単にコードを直すことではない。「そのバグがなぜ生まれたのか」というコンテキストを解明することだ。
XHR/fetch Breakpointsを設定し、実行を停止させた時、あなたは「時間の支配者」になる。変数の値を書き換え、コールスタックを跳躍し、非同期の実行順序を自在に操る。この体験を繰り返すことで、あなたの直感は研ぎ澄まされ、コードを書く段階で「ここは競合が起きやすい」という予兆を嗅ぎ取れるようになる。
明日からの開発では、`console.log` を捨てる勇気を持ってほしい。ブレークポイントという「外科手術用のメス」で、アプリケーションの深層に切り込むのだ。それが、エンジニアとしての格を一段引き上げる唯一の道である。