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

ここでは VSCode のデバッガコンソールを使って、デバッグ中に式や変数を確認・評価する方法 を初心者向けに丁寧に解説します。
デバッグを「止まって眺めるだけ」から「動かしながら調べる」に進化させるテクニックです。

1. デバッガコンソールとは？

• デバッグ中に使える 特別なコンソール。
• 単に console.log を書くのではなく、現在のブレークポイントでの変数や式を自由に評価できます。
• JavaScript の REPL（Read-Eval-Print Loop）のように動作します。

2. デバッグ準備

1. VSCode で Node.js プログラムを用意（例：debug_test.js）

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

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

main();

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

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

main();

2. add() の中や main() 内で ブレークポイント を置く
3. 「実行とデバッグ」▶「Launch Program」でデバッグ開始

3. デバッガコンソールの使い方

• デバッグ中、VSCode 画面下部の「デバッグコンソール」タブを開く
• ブレークポイントで止まった状態で入力可能

例：変数の中身を確認

ブレークポイントで止まった状態で

x

と入力すると → 現在の x の値が表示されます

5

例：式を評価する

x + y

と入力すると → 結果が表示されます

15

• 配列やオブジェクトも同様に評価できます

const obj = {a:1, b:2};
obj.a + obj.b   // 3

const obj = {a:1, b:2};
obj.a + obj.b   // 3

例：関数を呼び出す

add(20, 30)

→ 50 が表示されます

• デバッグ中なので、現在のスコープ内の変数を関数に渡せます

add(x, y)  // 15

4. デバッグコンソールでできること

5. 応用テクニック

スコープを限定して確認

• デバッグ中は 現在の関数内のスコープが有効

// add関数内で
a + b + x

→ グローバル変数 x とローカル変数 a,b を混ぜて評価可能

デバッグ用の値を一時変更

• 一時的に値を変更して挙動を試せます

x = 20
sum = add(x, y)

オブジェクトの詳細確認

console.dir(obj, {depth: null})

• ネストされたオブジェクトもフルに表示可能

6. ステップ実行と組み合わせて効果倍増

1. ブレークポイントで停止
2. デバッガコンソールで変数や式を確認
3. 「Step Over（F10）」や「Step Into（F11）」で1行ずつ進める
4. 再度コンソールで値や関数の挙動を確認

実行の前後で値がどう変わったかをリアルタイムで観察できます。

7. デバッグコンソールを使うメリット

• console.log を大量に書かなくて済む
• 変数の中身を一時的に変更して試せる
• 式や関数をその場で計算して確認できる
• 非同期処理（async/await）中でも、現在のスコープで値をチェック可能

8. 実践例（async/await デバッグ）

async function fetchData() {
  const data = await Promise.resolve({id: 1, name: "Alice"});
  const result = data.id * 10;
  return result;
}

(async () => {
  const val = await fetchData();  // ここでブレークポイント
})();

async function fetchData() {
  const data = await Promise.resolve({id: 1, name: "Alice"});
  const result = data.id * 10;
  return result;
}

(async () => {
  const val = await fetchData();  // ここでブレークポイント
})();

• デバッグコンソールで

data
result
data.name
data.id * 100

などを入力すれば、非同期の途中経過もリアルタイムで確認できます。

✅ まとめ

1. デバッグ中に 変数や式を即座に評価できる
2. スコープ内の関数やオブジェクトも自由に操作できる
3. ステップ実行と組み合わせると 「コードの流れと変化を目で追える」
4. 非同期処理や複雑なオブジェクトでも、デバッグコンソールを活用すると理解が圧倒的に早くなる