ここでは、Node.js の --inspect モードを使って VSCode でステップ実行（デバッグ）する方法を、
プログラミング初心者向けに 手順通りに進められるチュートリアル形式で解説します。

目標

✅ Node.js プログラムを
✅ VSCode から「ブレークポイント付き」で
✅ ステップ実行（1行ずつ動かして変数を確認）できるようになる！

1. 事前準備

2. サンプルコードを準備

まずは小さなファイルを作りましょう。

📄 debug_test.js

function add(a, b) {
  const result = a + b;
  return result;
}

function main() {
  const x = 5;
  const y = 10;
  const sum = add(x, y);
  console.log("合計は:", sum);
}

main();

function add(a, b) {
  const result = a + b;
  return result;
}

function main() {
  const x = 5;
  const y = 10;
  const sum = add(x, y);
  console.log("合計は:", sum);
}

main();

3. Node.js を「デバッグモード」で起動する方法

ターミナルで以下を実行します：

node --inspect debug_test.js

すると、出力にこんな感じが出ます👇

Debugger listening on ws://127.0.0.1:9229/xxxxxxxx
For help, see: https://nodejs.org/en/docs/inspector

これで Node.js は「デバッグサーバー」として待機中。
VSCode などの外部ツールがこのポート (9229) に接続できます。

4. VSCode 側の設定（launch.json の作成）

VSCode の左側サイドバーから「実行とデバッグ ▶（虫のアイコン）」をクリック。

次に：

1. 「launch.json ファイルを作成」をクリック
2. 「Node.js (JavaScript)」を選択
3. VSCode が自動でテンプレートを作ってくれます

作成された launch.json の中身（例）：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/debug_test.js"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/debug_test.js"
    }
  ]
}

これで OK です。

5. ブレークポイントを置く

コードエディタの左端（行番号の左）をクリックすると赤い丸がつきます👇

例：

function add(a, b) {
  const result = a + b; // ←ここをクリックして赤丸（ブレークポイント）を置く
  return result;
}

function add(a, b) {
  const result = a + b; // ←ここをクリックして赤丸（ブレークポイント）を置く
  return result;
}

6. ▶️ デバッグ実行する

「実行とデバッグ」ビューの上部から
Launch Program を選択 → ▶（再生ボタン）を押す！

💡 VSCode が自動で Node.js を --inspect モードで起動します。

7. ⏸️ ステップ実行の方法（デバッグ中）

ブレークポイントで一時停止したら、上部のツールバーを使います👇

8. 🔍 変数の中身を確認する

VSCode の左側「変数」「コールスタック」ペインで以下を確認できます。

9. 実際にデバッグしてみる（ステップ実行）

1️⃣ main() の先頭でブレーク
2️⃣ F10（または「Step Over」）を押すたびに1行ずつ進む
3️⃣ 「変数」ウィンドウで x, y, sum の値がどう変わるか確認

👉 プログラムの流れが目で見える！

10. もう少し便利な設定（オプション）

🔸 ファイル保存で自動再実行したい場合

launch.json に "restart": true を追加：

"restart": true

"restart": true

🔸 コマンドライン引数を渡したい場合

"args": ["arg1", "arg2"]

"args": ["arg1", "arg2"]

🔸 外部サーバー（既に node --inspect で起動中）に接続したい場合

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Process",
  "port": 9229
}

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Process",
  "port": 9229
}

→ Node.js を手動で node --inspect yourfile.js しておき、
この設定で「接続（Attach）」すればOK。

11. 非同期コードのデバッグもOK！

async/await や Promise も、VSCodeデバッガなら普通にステップ実行できます👇

async function fetchData() {
  const data = await new Promise(resolve =>
    setTimeout(() => resolve("データ取得成功"), 1000)
  );
  console.log(data);
}

fetchData();

async function fetchData() {
  const data = await new Promise(resolve =>
    setTimeout(() => resolve("データ取得成功"), 1000)
  );
  console.log(data);
}

fetchData();

👉 await の前で止めて、「非同期が再開されるタイミング」を観察できます。

まとめ

💬 ポイント：

• --inspect は「Node.js にデバッガ接続を許可するモード」
• VSCode は「その接続を自動で管理してくれるツール」
• ステップ実行できると「頭の中で追っていた流れ」を“目で見て確認”できる！