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

JavaScript

2025.11.08

ここでは 非同期処理（async/await）＋例外（throw）＋デバッガコンソール を組み合わせて、
「どこでエラーが起きたか」「変数の値がどう変わったか」をステップ実行で追跡する手順を作ります。

1. サンプルコード準備
2. VSCode 停止ポイントの設定
3. デバッグ開始
4. デバッガコンソールの使い方
1. 重要ポイント：await の前後で確認
5. エラー発生時の確認
6. デバッグの流れまとめ
7. コツ・ポイント

1. サンプルコード準備

📄 async_debug.js

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

  // idが負の場合はエラーを投げる
  if (id < 0) {
    throw new Error(`無効なID: ${id}`);
  }

  // 模擬的な非同期処理
  const data = await new Promise(resolve => {
    setTimeout(() => resolve({id, name: "Alice"}), 500);
  });

  console.log("fetchData完了:", data);
  return data;
}

async function main() {
  try {
    const result1 = await fetchData(1);    // 正常ケース
    const result2 = await fetchData(-5);   // エラーケース
    console.log("結果:", result1, result2);
  } catch (e) {
    console.error("捕捉された例外:", e.message);
    throw e; // さらに上位に投げる
  }
}

main();

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

  // idが負の場合はエラーを投げる
  if (id < 0) {
    throw new Error(`無効なID: ${id}`);
  }

  // 模擬的な非同期処理
  const data = await new Promise(resolve => {
    setTimeout(() => resolve({id, name: "Alice"}), 500);
  });

  console.log("fetchData完了:", data);
  return data;
}

async function main() {
  try {
    const result1 = await fetchData(1);    // 正常ケース
    const result2 = await fetchData(-5);   // エラーケース
    console.log("結果:", result1, result2);
  } catch (e) {
    console.error("捕捉された例外:", e.message);
    throw e; // さらに上位に投げる
  }
}

main();