JavaScript | 非同期処理をブレークポイントで止める

初心者が 「非同期処理をブレークポイントで止める」 のは少し難しく感じますが、
実はブラウザの開発ツール（DevTools）を使えば fetch や setTimeout の中の処理も止めて中身を確認 できます。

ここでは、

• 非同期処理の基本の流れ
• ブレークポイントで止める実践手順
• fetch・setTimeout それぞれのコツ
  を、初心者向けにかみ砕いて説明します。

1. 「非同期処理」って何？

JavaScript では、
重い処理（サーバー通信・タイマーなど）は すぐに結果が出ない ので、
「待っている間に次のコードを先に進める」仕組みを使います。

例：

console.log("① start");

setTimeout(() => {
  console.log("② timeout finished");
}, 2000);

console.log("③ end");

console.log("① start");

setTimeout(() => {
  console.log("② timeout finished");
}, 2000);

console.log("③ end");

実行結果：

① start
③ end
② timeout finished

つまり、setTimeout() の中の処理は 後で（非同期に）実行 されます。
この “後で実行される部分” にブレークポイントを置きたい、というのが今回のテーマです。

2. ブレークポイントの基本

開発ツールの 「Sources」タブ（または「デバッガ」タブ） を開くと、
JavaScript のソースコードを確認・編集できます。

• 行番号の左をクリック → 青い丸が付き、ブレークポイントが設定されます。
• その行の直前で コードの実行が一時停止 します。
• 停止中は変数の値・コールスタックをリアルタイムで確認できます。

3. setTimeout の中を止める方法

例：

console.log("A");

setTimeout(() => {
  console.log("B - inside timeout");
  let msg = "done";
  console.log(msg);
}, 3000);

console.log("C");

console.log("A");

setTimeout(() => {
  console.log("B - inside timeout");
  let msg = "done";
  console.log(msg);
}, 3000);

console.log("C");

手順：

1. ブラウザでページを開く → F12 → Sourcesタブを開く
2. 該当スクリプトを探して開く（右のファイルツリー）
3. console.log("B - inside timeout"); の行番号をクリックしてブレークポイントを置く
4. ページをリロード（またはボタンを押してスクリプトを実行）
5. 3秒後、タイマーのコールバックが呼ばれるタイミングで実行が停止！

👉 このとき、右側の Scope / Watch / Call Stack パネルを見ると：

• 変数 msg の中身
• この関数がどこから呼ばれたか（stack）
  がすぐ確認できます。

4. fetch の中を止める方法

例：

console.log("Start fetch");

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => response.json())
  .then(data => {
    console.log("Fetched:", data.title);
  })
  .catch(err => console.error("Error:", err));

console.log("End fetch");

console.log("Start fetch");

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => response.json())
  .then(data => {
    console.log("Fetched:", data.title);
  })
  .catch(err => console.error("Error:", err));

console.log("End fetch");

手順：

1. Sourcesタブでこのスクリプトを開く
2. console.log("Fetched:", data.title); の行にブレークポイントを置く
3. ページをリロードして実行
4. 通信が終わって .then() の中に入ると その行で停止

このとき右側の「Call Stack（呼び出し履歴）」を見ると、

• 非同期（Promise）を経由して呼ばれたことがわかります。
  「async」や「microtask」などが出ているはずです。

5. 「非同期で止まらない！」ときのチェックポイント

6. 「Watch」機能で変数を追う

ブレーク時に右側の「Watch Expressions」に
data.title や msg と入力すると、
その値をリアルタイムで追跡できます。
（再開後も監視できるので便利です）

7. ステップ実行のコツ

• ▶️ Resume：次のブレークポイントまで進める
• ⏭️ Step over：現在の行を実行して次へ
• ⏬ Step into：関数の中に入る
• ⏪ Step out：関数の外に戻る

非同期の then や setTimeout に入るには、“Step into next async call”（青い時計アイコン） を使うと確実に追えます。

まとめ