Visual Studio Code でのデバッグ

Visual Studio Code は、さまざまな種類のアプリケーションのデバッグを強力にサポートしています。VS Code には JavaScript、TypeScript、Node.js のデバッグ機能が組み込まれています。また、Visual Studio Marketplace には、他の言語やランタイムのデバッグをサポートするための多種多様なデバッグ用拡張機能が用意されています。

この記事では、VS Code のデバッグ機能と、VS Code でデバッグを開始する方法について説明します。また、VS Code で Copilot を使用してデバッグ構成の設定やデバッグセッションの開始を効率化する方法も学びます。

以下の動画では、VS Code でデバッグを開始する方法を紹介しています。

デバッガーのユーザーインターフェース

以下の図は、デバッガーユーザーインターフェースの主な構成要素を示しています。

1. 実行とデバッグ ビュー: 実行、デバッグ、デバッグ構成設定の管理に関するすべての情報を表示します。
2. デバッグツールバー: 最も一般的なデバッグ操作のためのボタンが配置されています。
3. デバッグコンソール: デバッガーで実行されているコードの出力を表示し、やり取りすることができます。
4. デバッグサイドバー: デバッグセッション中に、コールスタック、ブレークポイント、変数、ウォッチ変数を操作できます。
5. 実行メニュー: 最も一般的な実行およびデバッグコマンドが含まれています。

デバッグを開始する前に

1. Visual Studio Marketplace から、お使いの言語またはランタイム用のデバッグ拡張機能をインストールしてください。

   VS Code には、JavaScript、TypeScript、Node.js のデバッグが組み込まれています。

2. プロジェクトのデバッグ構成を定義します。

   単純なアプリケーションの場合、VS Code は現在アクティブなファイルを実行・デバッグしようと試みます。より複雑なアプリケーションやデバッグシナリオでは、launch.json ファイルを作成してデバッガー構成を指定する必要があります。デバッグ構成の作成に関する詳細をご確認ください。

   ヒント

   VS Code の Copilot は、launch.json ファイルの生成を支援します。詳細については、「Copilot を使用してデバッグ構成を生成する」を参照してください。

3. コードにブレークポイントを設定します。

   ブレークポイントは、コードの特定の行に設定できるマーカーで、その行に達したときにデバッガーに実行を一時停止するように指示します。エディターの行番号の横の余白（ガター）をクリックすることでブレークポイントを設定できます。

   ブレークポイントの詳細については、「ブレークポイントの操作」を参照してください。

デバッグセッションの開始

VS Code でデバッグセッションを開始するには、以下の手順を実行します。

1. デバッグしたいコードが含まれているファイルを開きます。

2. F5 キーを使用してデバッグセッションを開始するか、実行とデバッグ ビュー (workbench.view.debug) で 実行とデバッグ を選択します。

   

   実行中のプロセスへのアタッチなど、より複雑なデバッグシナリオの場合は、launch.json ファイルを作成してデバッガー構成を指定する必要があります。デバッグ構成に関する詳細をご確認ください。

3. 利用可能なデバッガーのリストから使用したいデバッガーを選択します。

   VS Code は現在アクティブなファイルを実行・デバッグしようと試みます。Node.js の場合、VS Code は package.json ファイル内の start スクリプトを確認し、アプリケーションのエントリポイントを決定します。

4. デバッグセッションが開始されると、デバッグコンソール パネルが表示されてデバッグ出力が表示され、ステータスバーの色が変更されます（デフォルトのカラーテーマではオレンジ色になります）。

   

5. ステータスバーのデバッグステータスには、アクティブなデバッグ構成が表示されます。デバッグステータスを選択してアクティブな起動構成を変更すれば、実行とデバッグ ビューを開かずにデバッグを開始できます。

   

デバッグ操作

デバッグセッションが開始されると、ウィンドウの上部にデバッグツールバーが表示されます。ツールバーには、コードのステップ実行、実行の一時停止、デバッグセッションの停止など、デバッグセッションの流れを制御するアクションが含まれています。

以下の表は、デバッグツールバーで使用可能なアクションを説明しています。

デバッグセッションに複数のターゲット（例: クライアントとサーバー）が含まれる場合、デバッグツールバーにセッションのリストが表示され、それらを切り替えることができます。

ブレークポイント

ブレークポイントは、コードの特定の地点で実行を一時停止するための特別なマーカーであり、その時点でのアプリケーションの状態を調査できます。VS Code は複数の種類のブレークポイントをサポートしています。

ブレークポイントの設定

ブレークポイントを設定または解除するには、エディターの余白をクリックするか、現在の行で F9 を使用します。

• エディターの余白にあるブレークポイントは、通常、赤い塗りつぶしの円として表示されます。
• 無効化されたブレークポイントは、塗りつぶされたグレーの円として表示されます。
• デバッグセッションが開始されたとき、デバッガーに登録できないブレークポイントは、中抜きのグレーの円に変わります。ライブ編集をサポートしていないデバッグセッション中にソースが編集された場合も同様のことが起こります。

必要に応じて、設定 debug.showBreakpointsInOverviewRuler VS Code で開く VS Code Insiders で開く を有効にすることで、エディターのオーバービュールーラーにブレークポイントを表示できます。

ブレークポイントをより細かく制御するには、実行とデバッグ ビューの ブレークポイント セクションを使用します。このセクションにはコード内のすべてのブレークポイントがリスト表示され、それらを管理するための追加操作が提供されます。

ブレークポイントの種類

条件付きブレークポイント

VS Code の強力なデバッグ機能の一つに、式、ヒット数、またはそれらの組み合わせに基づいた条件を設定できる機能があります。

• 式条件: 式が true と評価されるたびにブレークポイントがヒットします。
• ヒット数: ヒット数は、実行を中断する前にブレークポイントに何回ヒットする必要があるかを制御します。ヒット数が尊重されるかどうか、および式の正確な構文は、デバッガー拡張機能によって異なる場合があります。
• ブレークポイントを待機: 他のブレークポイントがヒットしたときに、そのブレークポイントがアクティブになります（トリガーされたブレークポイント）。

条件付きブレークポイントを追加するには

1. 条件付きブレークポイントを作成する

   • エディターの余白を右クリックし、条件付きブレークポイントの追加を選択します。
   • コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) で 条件付きブレークポイントの追加 コマンドを使用します。

2. 設定する条件の種類（式、ヒット数、またはブレークポイント待機）を選択します。

   

既存のブレークポイントに条件を追加するには

1. 既存のブレークポイントを編集する

   • エディターの余白にあるブレークポイントを右クリックし、ブレークポイントの編集を選択します。
   • 実行とデバッグ ビューの ブレークポイント セクションで、既存のブレークポイントの横にある鉛筆アイコンを選択します。

2. 条件（式、ヒット数、またはブレークポイント待機）を編集します。

デバッガーが条件付きブレークポイントをサポートしていない場合、条件付きブレークポイントの追加および条件の編集アクションは使用できません。

トリガーブレークポイント

トリガーされたブレークポイントは、他のブレークポイントがヒットした後に有効になる条件付きブレークポイントの一種です。特定の前提条件を満たした後にのみ発生するコード内の障害ケースを診断する際に役立ちます。

トリガーブレークポイントは、グリフマージンを右クリックし、トリガーブレークポイントの追加を選択してから、どのブレークポイントがブレークポイントを有効にするかを選択することで設定できます。

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

インラインブレークポイントは、実行がそのインラインブレークポイントに関連付けられた列に達したときにのみヒットします。これは、1行に複数のステートメントが含まれる縮小（ミニファイ）されたコードをデバッグする際に便利です。

インラインブレークポイントは、⇧F9 (Windows, Linux Shift+F9) を使用するか、デバッグセッション中のコンテキストメニューから設定できます。インラインブレークポイントはエディター内にインラインで表示されます。

インラインブレークポイントにも条件を設定できます。エディターの左余白のコンテキストメニューから、同一行にある複数のブレークポイントを編集することも可能です。

関数ブレークポイント

ソースコードに直接ブレークポイントを配置する代わりに、デバッガーは関数名を指定することでブレークポイントの作成をサポートしている場合があります。これはソースが利用できないが関数名がわかっている状況で役立ちます。

関数ブレークポイントを作成するには、ブレークポイント セクションのヘッダーにある + ボタンを選択し、関数名を入力します。関数ブレークポイントは、ブレークポイント セクションに赤い三角形で表示されます。

データブレークポイント

デバッガーがデータブレークポイントをサポートしている場合、変数 ビューのコンテキストメニューから設定できます。値が変更/読み取り/アクセスされたときにブレーク コマンドを追加すると、基になる変数の値が変更/読み取り/アクセスされたときにヒットするデータブレークポイントが作成されます。データブレークポイントは、ブレークポイント セクションに赤い六角形で表示されます。

ログポイント

ログポイントは、デバッガーで中断することなく、代わりにデバッグコンソールにメッセージを記録するブレークポイントの一種です。コード内にログ出力ステートメントを追加したり削除したりする手間を省くことができます。

ログポイントは、ひし形のアイコンで表されます。ログメッセージはプレーンテキストですが、波括弧 ('{}') 内に評価される式を含めることもできます。

ログポイントを追加するには、エディターの左余白を右クリックして ログポイントの追加 を選択するか、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) で デバッグ: ログポイントの追加... コマンドを使用します。また、設定 debug.gutterMiddleClickAction VS Code で開く VS Code Insiders で開く を構成して、エディターのガターをマウスの中ボタンで押したときにログポイントを切り替えることもできます。

通常のブレークポイントと同様に、ログポイントも有効/無効の切り替えが可能であり、条件やヒット数によって制御することもできます。

データの調査

実行とデバッグ ビュー

デバッグセッション中、実行とデバッグ ビューの 変数 セクションで変数や式を調査したり、エディター上のソースにマウスホバーしたりして確認できます。変数の値や式の評価は、コールスタック セクションで選択されたスタックフレームに対して相対的に行われます。

デバッグセッション中に変数の値を変更するには、変数 セクションで変数を右クリックし、値を設定 (Enter (Windows, Linux F2)) を選択します。

さらに、値をコピー アクションを使用して変数の値をコピーしたり、式としてコピー アクションを使用して変数にアクセスするための式をコピーしたりできます。その後、この式を ウォッチ セクションで使用できます。

変数や式は、実行とデバッグ ビューの ウォッチ セクションでも評価および監視できます。

名前や値で変数をフィルタリングするには、変数 セクションにフォーカスがある状態でキーボードショートカット ⌥⌘F (Windows, Linux Ctrl+Alt+F) を使用し、検索語を入力します。

デバッグコンソール REPL

式は、デバッグコンソール の REPL (Read-Eval-Print Loop) 機能を使用して評価できます。デバッグコンソールを開くには、デバッグペイン上部の デバッグコンソール アクションを使用するか、表示: デバッグコンソール コマンド (⇧⌘Y (Windows, Linux Ctrl+Shift+Y)) を使用します。

式は Enter キーを押した後に評価され、デバッグコンソール REPL は入力中に候補を表示します。複数行を入力する必要がある場合は、行の間に Shift+Enter を使用し、最後に Enter で評価のために送信してください。

デバッグコンソールの入力はアクティブなエディターのモードを使用するため、構文の色付け、インデント、引用符の自動補完などの言語機能がサポートされています。

マルチターゲットデバッグ

複数のプロセス（クライアントとサーバーなど）を伴う複雑なシナリオでは、VS Code はマルチターゲットデバッグをサポートしています。最初のデバッグセッションを開始した後、別のデバッグセッションを開始できます。2番目のセッションが稼働するとすぐに、VS Code の UI は マルチターゲットモード に切り替わります。

• 個々のセッションが コールスタック ビューのトップレベル要素として表示されるようになります。

  

• デバッグツールバーには現在 アクティブなセッション が表示されます（他のすべてのセッションはドロップダウンメニューから選択可能です）。

  

• デバッグ操作（デバッグツールバーのすべてのアクションなど）は、アクティブなセッションに対して実行されます。アクティブなセッションは、デバッグツールバーのドロップダウンメニューを使用するか、コールスタック ビューで別の要素を選択することで変更できます。

リモートデバッグ

VS Code はすべての言語でリモートデバッグを標準サポートしているわけではありません。リモートデバッグは使用しているデバッグ拡張機能の機能です。サポートや詳細については、Marketplace の各拡張機能のページをご確認ください。

ただし、例外として、VS Code に含まれる Node.js デバッガーはリモートデバッグをサポートしています。詳細については、「Node.js デバッグ」を参照してください。

デバッガー拡張機能

VS Code は Node.js ランタイムのデバッグを標準サポートしており、JavaScript、TypeScript、または JavaScript にトランスパイルされるその他の言語をデバッグできます。

他の言語やランタイム（PHP, Ruby, Go, C#, Python, C++, PowerShell および その他多数）のデバッグについては、Visual Studio Marketplace で Debuggers 拡張機能を探すか、トップレベルの「実行」メニューから 追加のデバッガーをインストール を選択してください。

デバッグ機能を備えた人気のある拡張機能をいくつか紹介します。

次のステップ

VS Code の Node.js デバッグサポートについては、以下をご覧ください。

• Node.js - VS Code に含まれている Node.js デバッガーについて説明します。
• TypeScript - Node.js デバッガーは TypeScript のデバッグもサポートしています。

デバッグの基本に関するチュートリアルについては、この動画をご覧ください。

• VS Code でデバッグを開始する - VS Code でのデバッグについて学びます。

VS Code における Copilot と AI 支援デバッグの詳細については、以下をご覧ください。

• Copilot を使用したデバッグと問題解決
• デバッグと問題解決のための Copilot チートシート

• C++
• Python
• Java

VS Code のタスク実行サポートについては、以下をご覧ください。

• タスク - Gulp、Grunt、Jake でタスクを実行する方法や、エラーと警告を表示する方法について説明します。

独自のデバッガー拡張機能を作成するには、以下をご覧ください。

• デバッガー拡張機能 - モックサンプルを使用して、VS Code デバッグ拡張機能を作成するために必要な手順を説明します。

よくある質問

サポートされているデバッグシナリオは？

Node.js ベースのアプリケーションのデバッグは、Linux、macOS、Windows 上で VS Code を使用してすぐに利用できます。その他の多くのシナリオは、Marketplace で入手可能な VS Code 拡張機能 によってサポートされています。

4/8/2026