非同期の迷宮から抜け出す：DevTools「XHR/fetch Breakpoints」が最強の武器である理由
フロントエンド開発において、最も頭を抱えるバグの一つが「非同期通信のタイミング問題」です。
「なぜかデータが空のまま描画されてしまう」「APIのレスポンス順序が前後して画面がちらつく」「特定の条件下だけでUIがバグる」。これらはすべて、ブラウザが裏側で何をしているか見えないことが原因です。
多くのエンジニアが `console.log` を大量に仕込んでデバッグしますが、それは「暗闇の中でライトを振り回す」ようなもの。本稿では、ブラウザの心臓部を直接制御し、通信の瞬間に実行を停止させる「XHR/fetch Breakpoints」という究極のデバッグテクニックを伝授します。
—
1. なぜ「console.log」ではダメなのか？
`console.log` は「事後報告」です。ログが出力された時点では、すでに非同期処理（Promiseの解決やDOMの更新）は完了しており、「なぜその状態になったのか」というプロセスを遡ることはできません。
一方、DevToolsの「XHR/fetch Breakpoints」は、JavaScriptエンジンの実行を通信の直前で「強制停止」させます。つまり、バグが発生する直前の変数、呼び出し元、コールスタックをすべて手に取るように確認できるのです。
—
2. 実践：XHR/fetch Breakpoints のセットアップ
特別なインストールは一切不要。すべてのモダンブラウザ（Chrome, Edge, Firefox）に標準搭載されています。
手順：ターゲットを絞り込む
1. Chromeで `F12` キーを押し、DevToolsを開きます。
2. 「Sources」パネルを選択します。
3. 右側のサイドバーにある 「XHR/fetch Breakpoints」 を探してください。
4. 「+」ボタンを押すと、URLの一部を入力するフィールドが現れます。
ここで、特定のAPIエンドポイントを指定します。例えば `/api/v1/user` というパスが含まれる通信を止めたい場合、以下のように設定します。
設定例：特定のAPI呼び出しをフックする
/api/v1/user
ここが重要：
この設定は「部分一致」です。空欄のまま追加すると、ブラウザ上のすべてのXHR/fetch通信で停止します。通信が多すぎる場合は、URLに含まれるユニークな文字列を入力して絞り込むのがコツです。
—
3. HelloWorld：通信を止め、中身を書き換える
まずは、簡単な実験をしてみましょう。以下のコードをブラウザのコンソールに貼り付けて実行してみてください。
// テスト用のダミーAPIを叩くコード
fetch(‘https://jsonplaceholder.typicode.com/todos/1’)
.then(response => response.json())
.then(json => console.log(‘データ取得完了:’, json));
このコードを実行する前に、Breakpointsに `todos/1` と入力しておいてください。
何が起きるのか？
1. `fetch` が実行された瞬間、ブラウザの画面が暗転し、JavaScriptの実行がピタッと止まります。
2. 画面右側の 「Call Stack」 を見てください。どの関数から `fetch` が呼ばれたのか、呼び出し元を辿ることができます。
3. さらに面白いのは、「Scope」 パネルです。通信される直前の引数や、`headers` の中身を、実行を再開する前に確認できます。
—
4. 現場で震えるほど役立つ「高度な活用法」
A. Race Condition（競合状態）の特定
検索ボックスで文字を入力するたびにAPIを叩く実装では、通信順序が入れ替わる「Race Condition」が頻発します。
この時、Breakpointを貼っておけば、どの順番でリクエストが飛んだかが時系列で明確になります。もしサーバーからのレスポンス順序が逆転しているなら、フロントエンド側で「古いリクエストをキャンセルする（AbortControllerを使用する）」という根本的な修正が必要だと確信を持って言えます。
B. 「UIのちらつき」の根本解決
画面がレンダリングされた後にデータが流し込まれることでUIがガクッと動く（Layout Shift）問題も、この機能で解決できます。
「データが来る前」と「来た後」の実行タイミングをステップ実行で追いかければ、`useEffect` や `mounted` のライフサイクル内で、どのタイミングで不要な再レンダリングが発生しているか、一撃で突き止められます。
—
結論：デバッガを使いこなす者は、コードを支配する
「コードが動かない」と悩む時間は、エンジニアにとって最も消耗する時間です。しかし、今日学んだ「XHR/fetch Breakpoints」をマスターすれば、通信の裏側を覗き込み、「なぜ動かないのか」ではなく「どうすれば動くのか」を直接的に制御できるようになります。
まずは、今抱えているプロジェクトのAPI通信に、一つだけブレークポイントを貼ってみてください。今までブラックボックスだった非同期の世界が、鮮明に見えるようになるはずです。
これが、現場の最前線で戦うエンジニアが手にする「真のデバッグ力」です。あなたのコーディングライフが、今日から劇的に楽になりますように。