VSCodeでブレークポイントを使う方法について

VSCode（Visual Studio Code）のブレークポイントとは、プログラムをデバッグ実行している途中で、指定した場所に到達したときに処理を一時停止させる機能です。

プログラムを一時停止すると、その時点における変数の値や関数の呼び出し状況、条件式の結果などを確認できます。

エラーが表示されないにもかかわらず処理結果がおかしい場合や、「どの処理で値が想定と変わったのか」を調査したい場合に便利です。

VSCodeでは一般的な行ブレークポイントだけでなく、条件付きブレークポイント、ログポイント、関数ブレークポイント、データブレークポイントなども利用できます。

ただし、利用できるブレークポイントの種類や機能は、使用しているプログラミング言語やデバッガーによって異なります。

VSCodeでブレークポイントを使うための準備

デバッグ環境を用意する

ブレークポイントを利用するには、対象のプログラムをVSCodeからデバッグできる環境が必要です。

JavaScriptやNode.jsについては、VSCodeにJavaScriptデバッガーが組み込まれています。

TypeScriptについても、Source Mapを利用することで、元のTypeScriptコード上でデバッグできます。

一方、PythonやC++などでは、対応する拡張機能やデバッガーを利用します。

Pythonでは、MicrosoftのPython拡張機能をインストールすると、Python Debuggerも利用できます。

C++の場合は、C/C++拡張機能だけでなく、環境に応じてGDBやLLDB、Visual Studio Windows Debuggerなどのデバッガーが必要になる場合があります。

そのため、ブレークポイントを設定できても、デバッグ環境が正しく構成されていなければ実際には停止できません。

VSCodeでブレークポイントを設定する方法

行番号の左側をクリックする

もっとも基本的な方法は、停止したいコードの行番号の左側にある余白をクリックする方法です。

クリックすると赤い丸が表示されます。

この赤い丸がブレークポイントです。

たとえば、次のJavaScriptがあるとします。

function calculatePrice(price, quantity) {
    const subtotal = price * quantity;
    const tax = subtotal * 0.1;
    const total = subtotal + tax;

    return total;
}

console.log(calculatePrice(1000, 3));

const subtotal = price * quantity;の行にブレークポイントを設定すると、その行に処理が到達した時点で実行を一時停止できます。

F9キーで設定・解除する

ブレークポイントはキーボードから設定することもできます。

停止したい行にカーソルを置いて、F9を押します。

同じ行でもう一度F9を押すと、ブレークポイントを解除できます。

頻繁にデバッグを行う場合は、マウスを使うより効率的です。

ブレークポイントを使ってデバッグを開始する方法

F5キーでデバッグを開始する

ブレークポイントを設定したら、プログラムをデバッグモードで実行します。

基本的にはF5キーを押します。

また、VSCode左側のアクティビティバーから「実行とデバッグ」を開き、実行するデバッグ構成を選択することもできます。

WindowsやLinuxでは、Ctrl + Shift + Dで「実行とデバッグ」ビューを開けます。

プログラムがブレークポイントを設定した場所まで到達すると、自動的に処理が停止します。

通常実行とデバッグ実行の違いに注意する

WindowsやLinuxでは、Ctrl + F5を使用すると「デバッグなしで実行」されます。

通常のブレークポイントを使いたい場合は、基本的にF5などからデバッグセッションを開始する必要があります。

「ブレークポイントを設定したのに停止しない」という場合は、通常実行していないか確認しましょう。

ブレークポイントで停止した後に確認できるもの

VARIABLESで変数の値を確認する

プログラムがブレークポイントで停止すると、「実行とデバッグ」ビューのVARIABLESから現在の変数を確認できます。

たとえば、

function calculatePrice(price, quantity) {
    const subtotal = price * quantity;
}

で停止した場合、

price
quantity
subtotal

といった変数の値を確認できます。

想定と異なる値が入っている変数を探すことで、不具合が発生している処理を特定しやすくなります。

コード上の変数にマウスを合わせる

デバッグ中に停止している場合は、コード内の変数へマウスポインターを合わせるだけでも値を確認できます。

単純な変数を素早く確認したいときに便利です。

WATCHで特定の値や式を監視する

WATCHでは、特定の変数や式を登録できます。

たとえば、

subtotal * 1.1

や、

user.age >= 18

といった式を登録すると、停止するたびに評価結果を確認できます。

変数が多いプログラムでは、確認したい項目だけをWATCHへ登録すると効率的です。

ただし、デバッガーや式の内容によっては、式の評価によってプログラムの状態へ影響する可能性があります。

複雑な式を登録する場合は注意しましょう。

CALL STACKで関数の呼び出し元を確認する

CALL STACKでは、現在実行している関数がどこから呼び出されたのかを確認できます。

たとえば、

main()
↓
createOrder()
↓
calculatePrice()

のような呼び出し関係を確認できます。

「なぜこの関数が呼び出されたのか」「どの処理から現在の場所へ到達したのか」を調査するときに便利です。

デバッグ中によく使う操作

Continueで次のブレークポイントまで進む

F5はデバッグ開始だけでなく、停止後のContinueにも使用します。

現在の位置からプログラムを再開し、次のブレークポイントまで実行します。

次のブレークポイントがなければ、そのまま処理が最後まで進みます。

Step Overで次の行へ進む

F10はStep Overです。

現在の行を実行し、次の行まで進みます。

たとえば、

const result = calculatePrice(1000, 3);
console.log(result);

でcalculatePrice()の内部まで調べる必要がなければ、Step Overを使います。

関数は実行されますが、通常は関数内部へ入らず次の行へ進みます。

Step Intoで関数内部へ入る

F11はStep Intoです。

現在の行で関数が呼び出されている場合、その関数内部へ移動して処理を追跡します。

たとえば、

const result = calculatePrice(1000, 3);

でStep Intoを実行すると、calculatePrice()の内部を詳しく確認できます。

Step Outで現在の関数から抜ける

現在の関数内部を調べ終わった場合は、Shift + F11でStep Outできます。

現在の関数の残りを実行し、呼び出し元へ戻るときに便利です。

デバッグを終了する

デバッグセッションそのものを終了する場合は、Shift + F5を使用します。

条件付きブレークポイントを使う方法

特定の条件を満たした場合だけ停止する

通常のブレークポイントは、その行を通るたびに停止します。

しかし、ループ処理では同じ行が数百回、数千回実行される場合があります。

そのようなときに便利なのが条件付きブレークポイントです。

たとえば、次のコードがあります。

for (let i = 0; i < 1000; i++) {
    console.log(i);
}

console.log(i)へ通常のブレークポイントを設定すると、最初のi = 0で停止します。

iが500になったときだけ停止したい場合は、ブレークポイントへ、

i === 500

という条件を設定します。

条件付きブレークポイントは、設定済みのブレークポイントを右クリックし、「Edit Breakpoint」などから設定できます。

特定のデータだけを調査できる

条件付きブレークポイントは、特定のデータだけで発生する不具合の調査にも便利です。

たとえば、

users.forEach(user => {
    processUser(user);
});

という処理で、特定のユーザーだけ問題が発生する場合は、

user.id === 123

のような条件を指定できます。

対象データ以外では停止しないため、デバッグ時間を短縮できます。

ヒットカウントを使う方法

指定した回数で停止できる

対応するデバッガーでは、ブレークポイントを何回通過したかによって停止するヒットカウントを使用できます。

たとえば、ループ処理で数十回実行された後に問題が発生する場合に便利です。

「指定回数以上になったら停止する」といった条件を設定できます。

記法はデバッガーによって異なる

ヒットカウントの指定方法は、使用するデバッガーによって異なります。

たとえばPython Debuggerでは、整数だけでなく、==、>、>=、<、<=、%などを使用した指定が可能です。

ただし、同じ指定方法をすべてのデバッガーで使えるとは限りません。

利用しているデバッガーの仕様を確認することが重要です。

ログポイントを使う方法

プログラムを停止せずに値を確認できる

Logpointは、通常のブレークポイントとは異なり、プログラムを停止させずにDebug Consoleへメッセージを出力する機能です。

たとえば、

User ID: {user.id}

のようなログポイントを設定できます。

波括弧内の式が評価され、実行時の値がDebug Consoleへ表示されます。

console.logを追加しなくてもデバッグできる

通常、JavaScriptで変数の値を調べるときは、

console.log(user);

のようなコードを追加することがあります。

Logpointを利用すれば、ソースコードを書き換えずに同様の確認ができます。

デバッグ終了後にconsole.log()を削除する作業も不要になります。

ただし、Logpointが利用できるかどうかはデバッガーによって異なります。

インラインブレークポイントとは

1行の特定位置へブレークポイントを設定できる

通常のブレークポイントは行を基準として設定します。

インラインブレークポイントは、1行の中にある特定の式や位置を対象に設定するための機能です。

たとえば、

foo(); bar(); baz();

のように1行へ複数の処理が記述されている場合に便利です。

WindowsやLinuxでは、デバッグセッション中にShift + F9でインラインブレークポイントを設定できます。

ただし、対応状況はデバッガーによって異なります。

関数ブレークポイントを使う方法

関数名を指定して停止する

対応するデバッガーでは、特定の行ではなく関数名を指定して停止できます。

これをFunction Breakpointと呼びます。

「実行とデバッグ」ビューのBREAKPOINTSセクションから関数ブレークポイントを追加し、

calculatePrice

のように関数名を指定します。

対象の関数が呼び出されたときに停止できます。

ソースファイル内の行を探してブレークポイントを設定しなくてもよいため、関数名が分かっている場合に便利です。

データブレークポイントを使う方法

変数の値が変更されたタイミングで停止する

対応するデバッガーでは、Data Breakpointを利用できます。

これは、特定の変数やメモリー領域が変更されたタイミングなどで処理を停止する機能です。

たとえば、

status = "active";

だった値が、どこかの処理で、

status = "disabled";

へ変更されているものの、変更しているコードが分からないとします。

そのような場合、Data Breakpointを利用すると原因を特定しやすくなります。

対応するデバッガーによっては、書き込み時だけでなく、読み取り時やアクセス時に停止できる場合もあります。

Triggered Breakpointを使う方法

別のブレークポイントをきっかけに有効化する

Triggered Breakpointは、あるブレークポイントへ到達したことをきっかけに、別のブレークポイントを有効化する機能です。

たとえば、

処理Aを実行した後だけ処理Bで不具合が発生する

というケースを考えます。

通常のブレークポイントでは、処理Bを通るたびに停止してしまう場合があります。

Triggered Breakpointを利用すると、

処理Aのブレークポイントへ到達
↓
処理Bのブレークポイントが有効化
↓
処理Bで停止

という流れを作れます。

特定の処理順序でのみ発生する不具合を調査するときに便利です。

launch.jsonを使ってデバッグ設定を管理する方法

launch.jsonとは

launch.jsonは、VSCodeのデバッグ方法を設定するファイルです。

プロジェクト固有の設定は一般的に、

.vscode/launch.json

へ保存します。

単純なプログラムではlaunch.jsonを作成しなくてもデバッグできる場合があります。

一方、

• 起動するプログラムを指定したい
• コマンドライン引数を渡したい
• 環境変数を設定したい
• 作業ディレクトリを指定したい
• 起動前にビルドしたい
• 実行中のプロセスへアタッチしたい

といった場合は、launch.jsonを利用すると便利です。

Node.jsのlaunch.jsonの例

Node.jsでは、たとえば次のように設定できます。

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

この設定では、app.jsをNode.jsのデバッガーで起動します。

設定した状態でF5を押すと、ブレークポイントを利用しながらプログラムを実行できます。

VSCodeでブレークポイントが効かない場合の原因

その行が実際には実行されていない

ブレークポイントを設定した行が、プログラムの実行経路に含まれていなければ停止しません。

たとえば、

if (user.isAdmin) {
    showAdminPanel();
}

でshowAdminPanel()へブレークポイントを設定していても、user.isAdminがfalseであればその行は実行されません。

まずは対象コードが本当に実行されているか確認しましょう。

実行できない位置に設定している

コメントや空行など、実行命令が存在しない場所ではブレークポイントが正しく設定されない場合があります。

その場合、近くの実行可能な行へブレークポイントを移動してみましょう。

ブレークポイントが灰色になっている

灰色の中抜きブレークポイントは、デバッガーがそのブレークポイントを有効な実行位置へまだ関連付けられていない場合などに表示されます。

原因としては、

• 対象ファイルがまだ読み込まれていない
• 実行しているファイルと編集しているファイルが異なる
• Source Mapが正しく生成されていない
• ビルド成果物が古い
• デバッガーが対象位置を解決できない

などが考えられます。

単純に「その行は実行できないから」とは限らない点に注意しましょう。

デバッグなしで実行している

WindowsやLinuxでCtrl + F5を使用すると、デバッグなしでプログラムが実行されます。

ブレークポイントを利用する場合は、基本的にF5からデバッグを開始してください。

launch.jsonの設定が間違っている

launch.jsonを使用している場合は、

program
cwd
args
env
preLaunchTask

などの設定を確認します。

特にprogramが実際に実行したいファイルを指しているか確認しましょう。

TypeScriptなどでSource Mapに問題がある

TypeScriptなど、元のソースコードを別のコードへ変換して実行する環境ではSource Mapが重要です。

たとえば、

TypeScript
↓
JavaScriptへ変換
↓
JavaScriptを実行

という環境では、元のTypeScriptと生成されたJavaScriptの対応関係が正しくなければ、ブレークポイントが想定した場所で停止しないことがあります。

ブレークポイントがずれたり灰色になったりする場合は、Source Mapやビルド成果物も確認しましょう。

Pythonでブレークポイントを使う場合の注意点

Python Debuggerを利用する

VSCodeでPythonをデバッグする場合は、Python Debuggerが利用されます。

MicrosoftのPython拡張機能をインストールすると、Python Debuggerも利用できるようになります。

また、現在のPythonデバッグ構成では、launch.jsonのtypeとして、

"type": "debugpy"

を使用します。

古い情報では、

"type": "python"

となっている場合がありますが、現在はdebugpyを使用する構成が推奨されています。

C++でブレークポイントを使う場合の注意点

C/C++拡張機能だけで完結するとは限らない

C++では、C/C++向けの拡張機能を導入しただけで必ずデバッグできるわけではありません。

利用しているOSや開発環境に応じて、

GDB
LLDB
Visual Studio Windows Debugger

などを使用します。

コンパイラーやデバッガーが正しく導入されているか確認することも重要です。

ブレークポイントをまとめて管理する方法

BREAKPOINTSビューを利用する

設定したブレークポイントは、「実行とデバッグ」ビューのBREAKPOINTSセクションからまとめて確認できます。

ここでは、

• ブレークポイントの有効化
• 無効化
• 削除
• 条件の変更
• 各ブレークポイントへの移動

などを行えます。

複数のファイルへブレークポイントを設定している場合は、BREAKPOINTSビューから管理すると効率的です。

VSCodeのブレークポイントでよく使うショートカット

デバッグ関連の基本ショートカット

WindowsやLinuxでよく使用するショートカットは次のとおりです。

操作	ショートカット
ブレークポイントの設定・解除	F9
デバッグ開始・続行	F5
Step Over	F10
Step Into	F11
Step Out	Shift + F11
デバッグ終了	Shift + F5
実行とデバッグを開く	Ctrl + Shift + D
デバッグなしで実行	Ctrl + F5
インラインブレークポイント	Shift + F9

OSやキーボード設定によってショートカットが異なる場合があります。

必要に応じてVSCodeのキーボードショートカット設定から確認してください。

VSCodeで効率よくブレークポイントを使うコツ

最初から大量のブレークポイントを設定しない

不具合の原因が分からないからといって、すべての行へブレークポイントを設定すると、かえって調査しにくくなります。

まずは、

入力処理
↓
主要な関数
↓
計算・変換処理
↓
出力処理

のように大きな単位でブレークポイントを設定しましょう。

問題のある範囲が絞れたら、Step OverやStep Intoを使って細かく確認します。

ループでは条件付きブレークポイントを使う

ループの中へ通常のブレークポイントを設定すると、何度も停止してしまいます。

たとえば、

user.id === targetUserId

のような条件を設定すれば、調査したいデータだけで停止できます。

値を見るだけならLogpointを使う

単純に変数の値を確認したいだけであれば、必ずしもプログラムを停止する必要はありません。

Logpointを使えば、処理を止めずにDebug Consoleへ値を出力できます。

通常のブレークポイントとLogpointを使い分けることで、効率よく原因を調査できます。

Step OverとStep Intoを使い分ける

すべての関数へStep Intoすると、標準ライブラリや外部ライブラリの内部まで入ってしまい、調査が複雑になることがあります。

自分が確認したい関数だけStep Intoし、問題がなさそうな処理はStep Overで進めるのが効率的です。

VSCodeのブレークポイントを活用して効率よくデバッグしよう

VSCodeでブレークポイントを使う基本的な流れは次のとおりです。

停止したい行へブレークポイントを設定
↓
F5でデバッグ開始
↓
ブレークポイントで停止
↓
VARIABLESやWATCHで値を確認
↓
F10やF11で処理を追跡
↓
原因を特定する

まず覚えておきたいのは、

F9：ブレークポイント設定・解除
F5：デバッグ開始・続行
F10：Step Over
F11：Step Into

の4つです。

基本操作に慣れてきたら、条件付きブレークポイントやLogpoint、ヒットカウント、Function Breakpoint、Data Breakpointなども活用すると、より複雑な不具合を効率的に調査できます。

ただし、高度なブレークポイント機能の対応状況や設定方法は、使用する言語やデバッガーによって異なります。

「VSCodeにある機能だからすべての言語で同じように使える」と考えず、利用しているデバッガーの仕様もあわせて確認することが重要です。

以上、VSCodeでブレークポイントを使う方法についてでした。

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