【初心者向け】VSCodeでデバッグする方法！ブレークポイントの使い方をわかりやすく解説

console.log を大量に書いてデバッグしていませんか？

実はVSCodeには強力なデバッグ機能が標準搭載されていて、console.log を一切書かなくても変数の中身を確認できます。一度使うと、もとに戻れなくなります。

デバッグとは？console.logとの違い

デバッグとは、プログラムのバグ（不具合）を見つけて修正する作業のことです。

多くの初心者は console.log() で変数の値を出力してバグを探しますが、これには限界があります。

デバッガーを使うと、console.logに費やしていた時間がまるごと消えます。

ブレークポイントとは？

ブレークポイントは、プログラムの実行を一時停止させる目印です。

「この行でコードを止めて、その時点の変数の値を確認したい」というときに使います。止まっている間は、変数の中身を自由に覗いたり、1行ずつ実行を進めたりできます。

ブレークポイントの設定方法

コードの行番号の左側をクリックすると、赤い丸が表示されます。これがブレークポイントです。

• もう一度クリックすると解除されます
• キーボードショートカット：カーソルを置いた状態で F9
• 複数の行にまとめて設定することもできます

JavaScript / Node.jsのデバッグ手順

最もよく使われるJavaScript（Node.js）のデバッグ手順を解説します。

ステップ1：ブレークポイントを設定する

デバッグしたい行の左側をクリックして、赤い丸を置きます。

たとえば以下のコードで、ループ内の計算が正しいか確認したい場合：

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {  // ← この行にブレークポイントを置く
    total += item.price * item.quantity;
  }
  return total;
}

3行目の行番号の左をクリックすると、赤い丸が表示されます。

ステップ2：デバッグを開始する

デバッグの開始方法は2通りあります。

方法A：サイドバーから起動

1. 左サイドバーの虫のアイコン（Run and Debug）をクリック
2. 「Run and Debug」ボタンをクリック
3. 実行環境の選択画面が出るので「Node.js」を選択

方法B：キーボードショートカット

F5 を押すだけでデバッグが開始されます。はじめて使う場合は環境選択画面が表示されます。

ステップ3：変数の値を確認する

ブレークポイントでプログラムが止まると、画面が変わります。

確認できる情報は3か所にあります。

①左パネルの「変数」セクション
現在のスコープにある変数がすべて表示されます。total, items, item など、その時点の値が一覧で見られます。

②コード上のホバー表示
変数の上にマウスを乗せると、その変数の現在の値がポップアップで表示されます。

③下部の「デバッグコンソール」
式を入力して評価できます。たとえば item.price * item.quantity と入力すれば、その計算結果が表示されます。

ステップ4：ステップ実行で1行ずつ進める

プログラムが止まった状態で、上部にステップ実行ツールバーが表示されます。

HTMLファイルのデバッグ（ブラウザ連携）

HTMLファイル内のJavaScriptをデバッグするには、ブラウザと連携する設定が必要です。

事前準備：拡張機能の確認

VSCodeに「Live Server」拡張機能がインストールされている前提で進めます。インストールしていない場合は先に導入してください。

launch.jsonの作成

Pythonのデバッグ

Python拡張機能（ms-python.python）がインストールされていれば、PythonでもVSCodeのデバッグ機能が使えます。手順はJavaScriptとほぼ同じです。

def calculate_average(numbers):
    total = sum(numbers)  # ← ここにブレークポイントを設定
    count = len(numbers)
    return total / count   # ← ゼロ除算が起きないか確認したい場合はここにも

scores = [85, 92, 78, 95, 88]
average = calculate_average(scores)
print(f"平均点: {average}")

1. total = sum(numbers) の行にブレークポイントを設定
2. F5 でデバッグ開始 → 環境選択で「Python File」を選択
3. 変数パネルで total, count, numbers の値を確認

numbers が空のリストになっていた場合、count が0になりゼロ除算エラーが起きる、といったことがその場で確認できます。

よくある質問

ブレークポイントで止まらない

原因1：実行しているファイルが違う

起動設定（launch.json）で指定しているファイルと、ブレークポイントを置いたファイルが違う可能性があります。デバッグコンソールにエラーが出ていないか確認してください。

原因2：ブレークポイントの行が実行されていない

コメント行・空行・到達しない条件分岐の中にブレークポイントを置いても止まりません。実際に実行される行に設定されているか確認してください。

原因3：launch.jsonの設定が正しくない

特にNode.jsの場合、program に指定しているファイルパスが正しいかチェックしてください。

「変数」パネルが空になっている

デバッグが開始されていない状態では変数パネルは空です。ブレークポイントを設定してから F5 でデバッグを起動し、プログラムがブレークポイントで止まった状態で確認してください。

また、ブレークポイントがある行より前で例外が発生して止まっている場合も、変数が空に見えることがあります。デバッグコンソールのエラーメッセージを確認してください。

毎回「環境を選択してください」が出る

launch.jsonが作成されていないか、.vscode フォルダーが存在しない場合に毎回表示されます。「create a launch.json file」から設定ファイルを作成すると、次回以降は自動で読み込まれます。

条件付きブレークポイントは使える？

使えます。赤い丸を右クリックすると「条件付きブレークポイントを編集」というメニューが出ます。

たとえば item.price > 1000 という条件を入れると、その条件が true のときだけ止まるようになります。ループが何百回も回る処理で特定の値のときだけ確認したい場合に便利です。

まとめ：まずは F9 → F5 → F10 の3ステップ

この記事のポイント

• ブレークポイントは行番号の左クリック（または `F9`）で設定
• `F5` でデバッグ開始、`F10` でステップ実行
• 左パネルの「変数」セクションで値を確認（console.log不要）
• JavaScript・Python・TypeScript等に対応
• 条件付きブレークポイントで特定条件のときだけ止められる

最初は console.log の方が楽に感じるかもしれませんが、デバッグ機能に慣れるとバグ修正のスピードが劇的に変わります。

まずは一番シンプルな処理でブレークポイントを1個置いて、F5 → F10 を体験するだけでOKです。