JavaScript | VSCode のデバッガコンソールで式を評価して調べる方法

では、さらに高度な 「複数 API を並列で呼び出す（Promise.all）＋例外発生時にどこで止まるかをステップ実行」 のデバッグ例を作ります。
Node.js + VSCode のデバッガコンソールをフル活用する形です。

1. サンプルコード準備（並列 API 呼び出し）

📄 parallel_api_debug.js

const fetch = require("node-fetch"); // Node.js 18未満の場合は npm install node-fetch

async function fetchUser(id) {
  console.log("fetchUser開始:", id);

  if (id <= 0) {
    throw new Error(`無効なユーザーID: ${id}`);
  }

  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`APIリクエスト失敗: ${response.status}`);
  }

  const data = await response.json();
  console.log("fetchUser完了:", data.name);
  return data;
}

async function main() {
  const ids = [1, -1, 3]; // -1 がエラーになる
  try {
    // 複数 API を並列で呼び出す
    const users = await Promise.all(ids.map(id => fetchUser(id)));
    console.log("取得ユーザー一覧:", users.map(u => u.name));
  } catch (e) {
    console.error("捕捉された例外:", e.message);
    console.error(e.stack);
  }
}

main();

const fetch = require("node-fetch"); // Node.js 18未満の場合は npm install node-fetch

async function fetchUser(id) {
  console.log("fetchUser開始:", id);

  if (id <= 0) {
    throw new Error(`無効なユーザーID: ${id}`);
  }

  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`APIリクエスト失敗: ${response.status}`);
  }

  const data = await response.json();
  console.log("fetchUser完了:", data.name);
  return data;
}

async function main() {
  const ids = [1, -1, 3]; // -1 がエラーになる
  try {
    // 複数 API を並列で呼び出す
    const users = await Promise.all(ids.map(id => fetchUser(id)));
    console.log("取得ユーザー一覧:", users.map(u => u.name));
  } catch (e) {
    console.error("捕捉された例外:", e.message);
    console.error(e.stack);
  }
}

main();

2. ブレークポイント設定

• fetchUser の最初の console.log("fetchUser開始:", id);
• if (id <= 0) の直前
• const users = await Promise.all(...) の行
• console.error(e.stack) の行

複数 await が同時に動くため、最初の停止でどの Promise がエラーを出すかを確認できます。

3. デバッグ手順

1. VSCode でデバッグ開始（Launch Program）
2. fetchUser の最初の行で停止
3. デバッガコンソールで id を確認

id

4. Promise.all の挙動を確認

• Promise.all は 1つでも reject があると即座に catch に飛ぶ
• デバッグコンソールで users を評価しても、まだ undefined
• Step Over すると、最初にエラーが投げられた Promise が catch に伝播します

5. 例外の追跡

1. id = -1 でエラー発生
2. デバッグコンソールで

e.message

→ "無効なユーザーID: -1"

e.stack

→ どの fetchUser 呼び出し（Promise）でエラーが起きたかが表示されます

• Step Into すると、どの行で throw が起きたかさらに詳しく追跡可能

6. デバッグコンソール活用例

並列処理中の状態確認

id   // 現在処理中の fetchUser の id

typeof data

→ await が完了していない Promise の場合 undefined

users

→ Promise.all が resolve する前は undefined

🔹 変数を書き換えて挙動確認

ids[1] = 2

• Step Over で再実行すれば、エラーを回避して並列処理が成功するか確認できます

7. ポイント

1. Promise.all は最初に reject が出た Promise で catch が飛ぶ
2. デバッグコンソールで各変数を確認 → 並列処理の途中状態も把握できる
3. Step Over / Into で非同期処理を追跡 → どの fetchUser がエラーか視覚的に理解
4. stack を確認 → 並列呼び出しのどの関数が原因かを特定可能

まとめ

この手順を使えば 複数の非同期 API 呼び出し＋例外発生時の挙動 を目で追いながら確認できます。