それではさらに実務レベルの例に拡張します。
ここでは API 呼び出し＋非同期例外＋ステップ実行＋デバッガコンソール確認 を組み合わせたサンプルを作ります。
実際の Node.js でステップ実行できるように設計しています。

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

📄 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}`);
  }

  // 模擬API呼び出し
  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);
  return data;
}

async function main() {
  try {
    const user1 = await fetchUser(1);   // 正常ケース
    const user2 = await fetchUser(-1);  // エラーケース
    console.log("取得ユーザー:", user1, user2);
  } 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}`);
  }

  // 模擬API呼び出し
  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);
  return data;
}

async function main() {
  try {
    const user1 = await fetchUser(1);   // 正常ケース
    const user2 = await fetchUser(-1);  // エラーケース
    console.log("取得ユーザー:", user1, user2);
  } catch (e) {
    console.error("捕捉された例外:", e.message);
    console.error(e.stack); // デバッグコンソールで確認できる
  }
}

main();

2. VSCode 停止ポイントの設定

• fetchUser の最初の console.log("fetchUser開始:", id); にブレークポイント
• if (id <= 0) の直前にもブレークポイント
• await fetchUser(-1) にもブレークポイント
• console.error(e.stack) も確認ポイントとしてブレーク可

3. デバッグ開始

1. VSCode 左サイドバー「実行とデバッグ」 → Launch Program → ▶
2. 最初のブレークポイントで停止
3. デバッガコンソールで変数や式を評価可能

4. デバッガコンソールで確認する内容

✅ 正常ケース（id = 1）の確認

• ブレークポイントで停止

id

→ 1 が表示

typeof response

→ undefined（await前はまだ取得されていない）

Step Over して await が完了した後：

response.ok

→ true

data

→ { id: 1, name: "Leanne Graham", ... }

✅ エラーケース（id = -1）の確認

• if (id <= 0) の直前でブレーク

id

→ -1 が確認できる

• Step Over すると throw が発生
• デバッグコンソールで例外オブジェクトを確認

e.message

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

e.stack

→ どの関数・行で throw が起きたかが確認できる

5. デバッグのポイント

1. await の前後で変数の中身が変化することを意識
2. try/catch 内で例外が発生したときの stack を必ず確認
3. デバッガコンソールで変数を書き換えて挙動を試すことも可能

id = 2

• そのまま Step Over で再実行すれば、エラーを回避して API を取得できる

6. 実務で役立つテクニック

• 複数 await の順序確認：ブレークポイントを順に置く
• APIレスポンスの内容を即確認：console.log(data) の代わりにデバッグコンソールで data を評価
• 非同期エラーの原因追跡：e.stack で async/await の呼び出し履歴を確認
• 未処理 Promise の確認：必要なら process.on('unhandledRejection', ...) を追加して補足

まとめ

💬 この方法を使えば、非同期 API + 例外 + ステップ実行 を組み合わせて、
「どの await で何が起きたか」「どこでエラーが投げられたか」を完全に追跡できます。