開発Tips（2025-12-26） | 今日の開発Tips

VS Code

デバッグ中に一時的に変数の値を確認したいけれど、ブレークポイントで実行を止めたり、コードに console.log のようなログ出力を追加しては消したりする手間を省きたい場面はありませんか？VS Codeの「ログポイント」機能を使えば、実行を中断せずに指定した値をデバッグコンソールに表示させることができます。

VS Codeでスマートなデバッグ！ブレークポイントを置かずにログを出力する「ログポイント」

従来のデバッグでは、コードに一時的なログ出力を追加したり、ブレークポイントを置いてプログラムの実行を中断し、変数の状態を確認するのが一般的です。しかし、ログ追加はコードの変更を伴い、ブレークポイントは実行の流れを止めてしまいます。 VS Codeのログポイントは、これらの手間を解消する便利な機能です。通常のブレークポイントと同じように行番号の左側をクリックして設定しますが、右クリックして「ログポイント」を選択し、出力したいメッセージと変数を指定することで、プログラムの実行を中断することなく、指定した変数の値をデバッグコンソールに表示させることができます。

コード例（概念的な説明）: 例えば、以下のJavaScriptコードで sum の値を確認したい場合。

function calculateSum(a, b) {
  let sum = a + b;
  // この行で sum の値を確認したいが、実行を止めたり console.log は入れたくない
  return sum;
}

calculateSum(10, 20);

ログポイントの設定方法:

let sum = a + b; の行番号の左側（通常ブレークポイントを設定する位置）を右クリックします。
コンテキストメニューから「ログポイントの追加…」を選択します。
ポップアップされる入力ボックスに、デバッグコンソールに出力したいメッセージと変数を以下のように入力します。 sumの値: {sum} （{} で囲むことで変数の値を評価して表示します。通常の文字列と組み合わせることも可能です。）
デバッグ実行を開始すると、この行が実行されるたびにデバッグコンソールに sumの値: 30 のように出力されます。

注意点やおすすめポイント:

非侵襲的デバッグ: ソースコードを一切変更することなく、デバッグ情報を取得できます。一時的なログの追加・削除の手間が省けます。
実行中断なし: プログラムの実行フローを妨げないため、非同期処理やタイミングが重要な処理のデバッグにも有効です。
デバッグコンソールと統合: 出力はVS Codeのデバッグコンソールに表示されるため、通常のデバッグ出力と合わせて確認しやすいです。
条件付きログポイント: 特定の条件が満たされたときにのみログを出力するように設定することも可能です（ログポイントを右クリックし、「ブレークポイントの編集」から設定）。これにより、必要な情報のみをフィルタリングして表示できます。