【VScode】のデバッグ機能とは？ブレークポイントの使い方を解説

💡 この記事でわかること

プログラミングをしていると、「思った通りに動かない」「どこでエラーになっているのか分からない」という場面によく遇います。
そんなときに役立つのがデバッグ機能です。

デバッグ機能を使うと、プログラムを途中で一時停止して、その時点での変数の中身や処理の流れを一つずつ確認できます。

👉 「console.logで値を表示して確認する」よりも、デバッグ機能を使う方が、どこで何が起きているかを実際の値を見ながら確認できるため、原因特定が早くなります。

この記事では、Node.jsで動く JavaScript ファイルを例に、VS Code標準のデバッガを使った基本的な手順を紹介します。言語や実行環境によっては追加の拡張機能が必要な場合もあります。

左側のアクティビティバーにある「実行とデバッグ」アイコン(再生ボタンに虫が付いたようなマーク)をクリックして開きます。

初めてデバッグを実行する際は、「Just My Code」などの選択肢が表示されることがあります。基本的には推奨されている項目を選べば、.vscode/launch.json という設定ファイルが自動で作成されます。

💡 このファイルには「何のファイルをどのように実行するか」の設定が保存されるため、次回以降は同じ設定を使い回せます。

F5 キー(または緑色の再生ボタン)を押すとデバッグが始まります。ブレークポイントを置いていなければ、通常の実行と同じように最後までプログラムが実行されて終了します。

ブレークポイントとは、「この行で一時停止する」という目印です。問題のありそうな行や、内容を確認したい行に置いて使います。

エディタの行番号の左側(余白部分)をクリックすると、赤い丸が表示され、その行にブレークポイントが設定されます。もう一度クリックすると解除できます。

ブレークポイントを置いた状態でF5キーを押すと、プログラムはその行の直前で一時停止します。

赤い丸を右クリックすると、「条件を追加」という項目が出てきます。例えば i === 5 のように条件を指定すれば、その条件を満たしたときだけ停止させることもできます。ループ処理の特定の回のみを確認したいときに便利です。

ブレークポイントで停止すると、画面上部に操作ツールバーが表示されます。

左側の「変数」パネルには、現在停止している行で存在する変数とその値が一覧表示されます。変数にマウスカーソルを重ねても値を確認できます。

「ウォッチ式」パネルで式を登録しておくと、デバッグ中にずっとその式の結果を追い続けられます。特定の変数や計算式の変化を継続的に見たいときに便利です。

下部の「デバッグコンソール」タブでは、停止中に式を直接入力して評価結果を確認することができます。普段使っている統合ターミナルとは別のパネルですが、使い方は似ています。

ファイルを保存していなかったり、実行されないコードの行に置いていると、ブレークポイントで止まらないことがあります。まずはファイルが保存されているかを確認しましょう。

Node.jsなどの実行環境が未インストールだと、デバッグを開始できないことがあります。エラーメッセージに実行環境名が表示されていないか確認してみてください。

設定を試行錯誤しているうちに launch.json がうまく動かなくなった場合は、ファイルを一度削除して、最初から自動生成させ直すのが手っ取り早いことがあります。

VS Codeのデバッグ機能を使えば、ブレークポイントで処理を一時停止し、変数の中身を見ながらバグの原因を特定できます。最初は操作が多く感じるかもしれませんが、F5で実行してブレークポイントを置くだけでも十分使える機能ですので、この記事の手順で一度試してみてください。