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

console.log でデバッグしていませんか？

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

この記事では、VSCodeのデバッグ機能の使い方を初心者向けに解説します。

デバッグとは？

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

多くの初心者は console.log() で変数の値を出力してバグを探しますが、VSCodeのデバッグ機能を使えば：

デバッグ機能のメリット

• コードを途中で止めて変数の値を確認できる
• 1行ずつ実行して処理の流れを追える
• console.logを書いたり消したりする手間がなくなる
• 複雑なバグも効率的に原因を特定できる

デバッグの基本：ブレークポイント

ブレークポイントとは？

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

「この行でプログラムを止めて、その時点の変数の値を見たい」という時に使います。

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

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

もう一度クリックすると解除されます。

ショートカット：カーソルを置いて F9 でもOK。

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

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

デバッグしたい行の行番号の左をクリックします。

例えば以下のコードの3行目にブレークポイントを設定：

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

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

1. サイドバーの虫のアイコン（Run and Debug）をクリック
2. 「Run and Debug」ボタンをクリック
3. 環境を選択（Node.jsなら「Node.js」）

または F5 キーでデバッグ開始。

ステップ3：変数を確認

ブレークポイントでプログラムが止まると：

• 左パネルの「変数」セクションに現在の変数の値が表示される
• コード上の変数にマウスを乗せると値がポップアップ表示される
• 下部の「デバッグコンソール」で式を入力して評価できる

ステップ4：ステップ実行

プログラムが止まった状態で、1行ずつ実行を進められます。

HTMLファイルのデバッグ

HTMLファイルのJavaScriptをデバッグするには、ブラウザのデバッガーを使います。

Pythonのデバッグ

Python拡張機能がインストールされていれば、PythonでもVSCodeのデバッグ機能が使えます。

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. ブレークポイントを設定
2. F5 でデバッグ開始（「Python File」を選択）
3. 変数パネルで total, count, numbers の値を確認

デバッグでよくある質問

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

原因と対処法：
– 実行しているファイルとブレークポイントを設定したファイルが違う
– ブレークポイントの行がコメントや空行になっている
– launch.jsonの設定が正しくない

「変数」パネルに何も表示されない

デバッグが開始されていない可能性があります。F5 でデバッグを開始してから確認してください。

もっとプログラミングスキルを上げたいなら

デバッグ機能を使いこなせるようになると、バグの解決スピードが格段に上がります。

関連記事

• [VSCodeの波線の意味と消し方](/blog/423/)
• [VSCode拡張機能おすすめ15選](/blog/3409/)
• [VSCodeショートカットキーおすすめ20選](/blog/3407/)
• [VSCodeのターミナルの開き方・使い方](/blog/3406/)

まとめ：console.logを卒業しよう

この記事のポイント

• ブレークポイントは行番号の左クリックで設定
• F5 でデバッグ開始、F10 でステップ実行
• 変数パネルで値を確認（console.log不要）
• JavaScript、Python、TypeScript等に対応

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

まずは簡単なプログラムでブレークポイントを試してみてください！