VSCodeのデバッグコンソールの使い方について

VSCode（Visual Studio Code）のデバッグコンソールは、デバッグ実行中のプログラムの状態を確認したり、式をその場で評価したりするための機能です。

単にログを確認するだけではなく、ブレークポイントでプログラムを停止した状態で変数の値を調べたり、計算式や条件式を実行したりできます。

例えば、Pythonで次のようなコードをデバッグしているとします。

price = 1000
quantity = 3
total = price * quantity

ブレークポイントで停止している状態で、デバッグコンソールに次のように入力します。

price

すると、現在のpriceの値を確認できます。

1000

さらに、

price * quantity

と入力すれば、その場で計算結果を確認できます。

3000

このように、デバッグコンソールは「現在のプログラムの状態を確認しながら、式を試すための場所」と考えると分かりやすいでしょう。

デバッグコンソールとターミナルの違い

VSCodeには、デバッグコンソールのほかに統合ターミナルや出力パネルがあります。

見た目が似ているため混同しやすいですが、それぞれ用途が異なります。

機能	主な用途
デバッグコンソール	デバッグ中の変数確認や式の評価
統合ターミナル	PowerShell、bash、Command Promptなどの操作
出力パネル	VSCodeや拡張機能などのログ確認

デバッグコンソールは通常のシェルではない

デバッグコンソールは、基本的にOSのシェルコマンドを実行する場所ではありません。

例えば、次のようなコマンドを使う場合は統合ターミナルを利用します。

cd
ls
dir
npm install
pip install

一方で、デバッグコンソールでは次のような式を評価します。

user.name

len(items)

なお、使用するデバッガーによっては、デバッグコンソールからデバッガー固有のコマンドを実行できる場合もあります。

そのため、「デバッグコンソールでは一切コマンドを実行できない」というより、「通常のシェル操作を行う場所ではない」と理解するのが適切です。

VSCodeでデバッグコンソールを開く方法

デバッグコンソールは、VSCodeのメニューから開けます。

メニューから開く

メニューバーから、

表示
↓
デバッグ コンソール

を選択します。

ショートカットで開く

WindowsおよびLinuxでは、標準キーバインドで次のショートカットを使用できます。

Ctrl + Shift + Y

macOSでは、

Shift + Command + Y

です。

コマンドパレットから、

View: Debug Console

を実行して開く方法もあります。

デバッグコンソールを使う基本的な流れ

デバッグコンソールは、基本的にデバッグセッション中に使用します。

実際の操作は、次の流れで進めると分かりやすいでしょう。

ブレークポイントを設定する

まず、プログラムを停止させたい行にブレークポイントを設定します。

エディター左側の余白をクリックすると、赤い丸が表示されます。

WindowsやLinuxでは、標準キーバインドでF9を使ってブレークポイントのオン・オフを切り替えることもできます。

例えば、次のコードがあるとします。

price = 1000
quantity = 3

total = price * quantity
print(total)

total = price * quantityの行などにブレークポイントを設定します。

デバッグを開始する

ブレークポイントを設定したら、デバッグを開始します。

一般的には、

F5

を押します。

または、VSCodeの「実行とデバッグ」からデバッグを開始することもできます。

ブレークポイントでプログラムを停止する

プログラムがブレークポイントまで到達すると、一時停止します。

この状態になると、現在の変数や関数の状態を詳しく調査できます。

デバッグコンソールで式を評価する

デバッグコンソールを開き、例えば次のように入力します。

price

すると、

1000

のように現在の値を確認できます。

さらに、

price * quantity

と入力すれば、現在の変数を使った計算結果も確認できます。

変数の値を確認する方法

デバッグコンソールで最も基本的な操作が、変数の確認です。

Pythonの場合

例えば、

name

user

items

などを入力すると、その時点での値を確認できます。

JavaScriptの場合

JavaScriptでは、

user

user.name

items.length

などの式を評価できます。

バグが発生したときに、想定している値と実際の値が一致しているかを確認するのに便利です。

オブジェクトや配列の中身を確認する方法

変数そのものだけではなく、オブジェクトのプロパティや配列の要素も確認できます。

オブジェクトのプロパティを確認する

例えば、JavaScriptで次のオブジェクトがあるとします。

const user = {
    name: "Taro",
    age: 30
};

デバッグコンソールで、

user.name

と入力すれば、

Taro

を確認できます。

同様に、

user.age

と入力すれば、

30

を確認できます。

配列やリストを確認する

JavaScriptでは、

items.length

items[0]

items.filter(item => item.price > 1000)

などを評価できます。

Pythonの場合は、

len(items)

items[0]

[x for x in items if x > 10]

といった式を使えます。

大量のデータを扱うプログラムでは、特定の条件に一致する要素だけを調べる用途にも便利です。

条件式をデバッグコンソールで確認する

条件分岐が意図したとおりに動かない場合にも、デバッグコンソールが役立ちます。

例えばJavaScriptで、

if (user.age >= 18 && user.active) {
    // 処理
}

という処理がある場合、次のように条件を分解して確認できます。

user.age

user.active

user.age >= 18

user.age >= 18 && user.active

この方法を使えば、「どの条件が原因でfalseになっているのか」を切り分けやすくなります。

関数をデバッグコンソールから実行する

使用しているデバッガーが対応していれば、デバッグコンソールから関数を呼び出すこともできます。

JavaScriptであれば、

calculateTotal(1000, 3)

Pythonであれば、

calculate_total(1000, 3)

のように入力できます。

これにより、特定の引数を渡したときに関数がどの値を返すのかを、その場で確認できます。

関数実行によってプログラムの状態が変わる場合がある

デバッグコンソールの式評価は、必ずしも読み取り専用ではありません。

例えばJavaScriptで、

items.push(newItem)

と実行すると、実際にitemsの内容が変更される可能性があります。

また、

user.active = false

のような式を評価すれば、変数の状態が変わることがあります。

そのため、関数や代入式をデバッグコンソールから実行するときは、プログラムの状態を変更してしまわないか注意する必要があります。

デバッグコンソールとCALL STACKの関係

デバッグコンソールで式を評価するときは、現在選択しているスタックフレームが重要です。

スタックフレームごとに参照できる変数が異なる

例えば、JavaScriptで次のようなコードがあるとします。

function outer() {
    const a = 10;

    function inner() {
        const b = 20;
        debugger;
    }

    inner();
}

inner()の中で停止している場合、

b

を評価できます。

一方で、CALL STACKから別のスタックフレームを選択すると、参照できる変数やスコープが変わる場合があります。

デバッグコンソールでは、基本的に現在選択されているスタックフレームのコンテキストで式が評価されます。

関数呼び出しが複雑なプログラムを調査するときは、CALL STACKとデバッグコンソールを組み合わせると便利です。

デバッグコンソールで複数行入力する方法

長い式を入力するときは、複数行に分けて記述できます。

標準設定では、

Shift + Enter

で改行できます。

入力が完成したら、

Enter

を押して評価します。

例えばJavaScriptなら、

items
    .filter(item => item.price > 1000)
    .map(item => item.name)

のような式を複数行で入力できます。

ただし、複数行入力でどの程度複雑なコードを評価できるかは、使用しているデバッガーによって異なります。

VARIABLESとデバッグコンソールの違い

VSCodeの「実行とデバッグ」ビューには、「VARIABLES」という領域があります。

VARIABLESでは、現在のスコープに存在する変数を一覧で確認できます。

VARIABLESが向いている場面

「現在どのような変数が存在しているのか」を一覧で確認したい場合に適しています。

例えば、

price
quantity
total
user
items

といった変数をまとめて確認できます。

デバッグコンソールが向いている場面

デバッグコンソールでは、

price * quantity

user.age >= 18

items.length

など、任意の式をその場で評価できます。

したがって、

VARIABLES
→ 現在の変数を一覧で確認

Debug Console
→ 任意の式をその場で評価

という使い分けが分かりやすいでしょう。

WATCHとデバッグコンソールの違い

VSCodeには「WATCH」という機能もあります。

WATCHでは、調べたい式を登録しておくことで、デバッグ中にその値を継続的に確認できます。

例えば、

user.age

をWATCHに登録しておけば、プログラムが停止するたびに値を確認できます。

一方、デバッグコンソールは、

必要になった式をその場で評価する

用途に向いています。

VARIABLES・WATCH・Debug Consoleの使い分け

それぞれの役割を整理すると、次のようになります。

機能	向いている用途
VARIABLES	現在の変数を一覧で確認する
WATCH	特定の式や変数を継続的に監視する
Debug Console	必要な式をその場で評価する

これらを組み合わせることで、効率よくデバッグできます。

Logpointとデバッグコンソールを組み合わせる

VSCodeには、通常のブレークポイントとは別に「Logpoint」という機能があります。

Logpointとは

Logpointは、プログラムを停止せずにログを出力するための機能です。

通常のブレークポイントでは、

ブレークポイント到達
↓
プログラム停止
↓
状態を確認
↓
実行再開

という流れになります。

一方、Logpointではプログラムを止めずにデバッグ情報を出力できます。

例えば、

User ID: {user.id}

のようなLogpointを設定すると、その行を通過したときに値を含むメッセージを確認できます。

ループ処理のように、何度も実行される場所の状態を調べるときに便利です。

デバッグ操作でよく使うショートカット

デバッグコンソールを活用するなら、デバッグ操作のショートカットも覚えておくと効率が上がります。

操作	Windows / Linux
デバッグ開始・続行	F5
一時停止	F6
ブレークポイント切り替え	F9
ステップオーバー	F10
ステップイン	F11
ステップアウト	Shift + F11
デバッグ再起動	Ctrl + Shift + F5
デバッグ停止	Shift + F5

ステップオーバー

F10を押すと、現在の行を実行して次の行へ進みます。

関数が呼び出される場合でも、基本的にはその関数内部へ入りません。

ステップイン

F11を押すと、呼び出される関数の内部へ移動します。

関数内部の処理を細かく確認したい場合に使用します。

ステップアウト

Shift + F11では、現在実行している関数を抜けて、呼び出し元へ戻ります。

launch.jsonとは

VSCodeでは、より細かいデバッグ設定を行うためにlaunch.jsonを使用できます。

通常は、

.vscode/launch.json

に保存されます。

launch.jsonは必須ではない

launch.jsonは、すべてのデバッグで必須というわけではありません。

簡単なプログラムであれば、設定ファイルを作成せずにデバッグできる場合があります。

一方で、

• 実行するファイル
• コマンドライン引数
• 環境変数
• 作業ディレクトリ
• デバッガー
• launchまたはattach
• コンソール

などを細かく指定したい場合は、launch.jsonを使用すると便利です。

launch.jsonの基本例

例えば、Node.jsでは次のような設定を記述できます。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Program",
            "program": "${workspaceFolder}/app.js"
        }
    ]
}

主な項目は次のとおりです。

type
→ 使用するデバッガー

request
→ launchまたはattachなどの方式

name
→ VSCode上に表示するデバッグ設定名

program
→ 実行するプログラム

internalConsoleとintegratedTerminalの違い

デバッガーによっては、launch.jsonでコンソールの種類を指定できます。

代表的な設定には、

"console": "internalConsole"

"console": "integratedTerminal"

"console": "externalTerminal"

などがあります。

internalConsole

VSCode内部のデバッグコンソールを利用する設定です。

Node.jsなどでは、標準出力がDebug Consoleに表示される構成で使用されることがあります。

integratedTerminal

VSCode内蔵の統合ターミナルを使用します。

キーボード入力を必要とするプログラムなどでは、こちらが適している場合があります。

externalTerminal

VSCodeとは別の外部ターミナルを使用します。

対応状況はデバッガーによって異なる

重要なのは、これらの設定や動作がすべての言語で共通ではないという点です。

例えば、PythonとNode.jsではデフォルトのコンソール設定や入出力の扱いが異なります。

そのため、使用している言語やデバッガーの仕様に合わせて設定する必要があります。

Pythonでデバッグコンソールを使う場合の注意点

Pythonでは、VSCodeのPython拡張機能などを利用してデバッグします。

プログラム出力は統合ターミナルに表示される場合が多い

Pythonのデバッグでは、通常integratedTerminalが利用される構成が一般的です。

そのため、

print("Hello")

の出力がデバッグコンソールではなく、VSCodeの統合ターミナルに表示される場合があります。

一方で、ブレークポイントで停止した状態の変数確認や式の評価にはデバッグコンソールを利用できます。

Node.jsでデバッグコンソールを使う場合の注意点

Node.jsでは、Debug Consoleがデフォルトの出力先として使われる構成があります。

そのため、

console.log("Hello")

などの出力をDebug Consoleで確認できる場合があります。

標準入力が必要な場合はターミナルを使う

Node.jsでユーザー入力を必要とするプログラムをデバッグする場合は、integratedTerminalやexternalTerminalを利用するのが適しています。

このように、同じVSCodeでも使用しているデバッガーによって入出力の挙動が異なります。

デバッグコンソールで式を入力できないときの対処法

デバッグコンソールを開いても、正常に式を評価できない場合があります。

デバッグセッションを開始しているか確認する

デバッグコンソールで式を評価するには、基本的にアクティブなデバッグセッションが必要です。

まず、

F5

などでデバッグを開始しているか確認します。

ブレークポイントで停止して試す

デバッガーや式によっては、プログラム実行中よりも、ブレークポイントで停止している状態のほうが式を評価しやすくなります。

変数や現在のスコープを調査したい場合は、ブレークポイントで停止してから確認するのが基本です。

変数がスコープ内にあるか確認する

例えば、

function test() {
    const value = 100;
}

というコードがある場合、valueを参照できるのは基本的にそのスコープ内です。

デバッグコンソールで、

value

と入力してエラーになる場合は、

• 現在停止している場所
• 選択しているスタックフレーム
• 変数のスコープ

を確認します。

デバッガーが式評価に対応しているか確認する

Debug Consoleで利用できる機能は、使用しているデバッガーによって異なります。

例えば、

• 式の評価
• オートコンプリート
• 変数の変更
• Logpoint
• 条件付きブレークポイント
• 関数呼び出し

などは、デバッガー側の実装によって対応状況が異なります。

VSCodeの画面が同じでも、JavaScript、Python、C++、Javaなどで利用できる機能が完全に同じとは限りません。

デバッグコンソールを効率よく使うコツ

デバッグコンソールは、単に変数を眺めるだけではなく、「仮説を検証する場所」として使うと効果的です。

複雑な条件式を分解して確認する

例えば、

if (user.age >= 18 && user.active && user.plan === "premium") {
    // 処理
}

という条件が正しく動かない場合は、いきなりコードを書き換えるのではなく、デバッグコンソールで次のように確認します。

user.age

user.active

user.plan

user.age >= 18

user.plan === "premium"

user.age >= 18 && user.active && user.plan === "premium"

このように段階的に確認すると、どの条件で想定外の結果になっているのかを特定しやすくなります。

VARIABLES・WATCH・CALL STACKと組み合わせる

効率的にデバッグするには、Debug Consoleだけでなく、

• VARIABLES
• WATCH
• CALL STACK
• BREAKPOINTS
• Logpoint

などを組み合わせて使用するのがおすすめです。

例えば、

VARIABLES
→ 現在の変数全体を確認

WATCH
→ 重要な値を継続監視

CALL STACK
→ 関数の呼び出し経路を確認

Debug Console
→ 仮説を式としてその場で検証

というように役割を分けると、バグの原因を効率よく追跡できます。

VSCodeのデバッグコンソールを使う際の注意点

デバッグコンソールは非常に便利ですが、いくつか注意点があります。

使用できる機能は言語によって異なる

Debug ConsoleのUI自体はVSCode共通ですが、実際のデバッグ機能は各デバッガーによって提供されます。

そのため、

JavaScript
Python
C++
Java
C#

などで、式の評価方法や対応機能が異なる場合があります。

式の評価によって状態を変更しないよう注意する

次のような式を実行すると、

user.age = 20

items.push(item)

プログラムの状態そのものが変わる可能性があります。

デバッグ結果に影響する場合があるため、状態を変更する式を実行するときは注意しましょう。

ターミナルと混同しない

Debug ConsoleとIntegrated Terminalは目的が異なります。

Debug Console
→ デバッグ中の式評価や状態確認

Integrated Terminal
→ シェルコマンドやプログラム実行

という違いを理解しておくと、VSCodeのデバッグ機能を使いやすくなります。

まとめ

VSCodeのデバッグコンソールは、デバッグ実行中のプログラムの状態を確認しながら、変数や式をその場で評価できる便利な機能です。

基本的な使い方は、

ブレークポイントを設定
↓
F5でデバッグ開始
↓
ブレークポイントで停止
↓
Debug Consoleを開く
↓
変数や式を入力
↓
結果を確認

という流れです。

例えば、

user

user.name

items.length

price * quantity

user.age >= 18

といった式を評価できます。

また、Debug Consoleだけでなく、VARIABLES、WATCH、CALL STACK、ブレークポイント、Logpointなどを組み合わせることで、バグの原因をより効率よく調査できます。

ただし、Debug Consoleで利用できる式や入出力、関数実行などの機能は、使用している言語やデバッガーによって異なります。

そのため、VSCodeのデバッグコンソールは「すべての言語で完全に同じように動く機能」ではなく、「VSCodeの共通UIを通して、それぞれのデバッガー機能を利用する仕組み」と理解しておくとよいでしょう。

以上、VSCodeのデバッグコンソールの使い方についてでした。

最後までお読みいただき、ありがとうございました。