Visual Studio Code でコードをデバッグする

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

この記事では、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 の強力なデバッグ機能は、式、ヒット数、または両方の組み合わせに基づいて条件を設定できることです。

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

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

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

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

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

   

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

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

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

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

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

トリガーされたブレークポイント

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

トリガーされたブレークポイントは、グリフ余白を右クリックし、[トリガーされたブレークポイントの追加] を選択し、ブレークポイントを有効にする別のブレークポイントを選択することで設定できます。

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

インライン ブレークポイントは、実行がインライン ブレークポイントに関連付けられた列に到達した場合にのみヒットします。これは、1 行に複数のステートメントが含まれている縮小されたコードをデバッグする場合に役立ちます。

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

インライン ブレークポイントには条件を含めることもできます。1 行に複数のブレークポイントを編集するには、エディターの左余白にあるコンテキスト メニューを使用します。

関数ブレークポイント

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

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

データ ブレークポイント

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

ログポイント

ログポイントは、デバッガーに割り込むのではなく、メッセージをデバッグ コンソールに記録するブレークポイントのバリアントです。ログポイントは、コードにログ ステートメントを追加または削除する必要がないため、時間を節約するのに役立ちます。

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

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

通常のブレークポイントと同様に、ログポイントを有効または無効にしたり、条件やヒット数で制御したりすることもできます。

データ検査

[実行とデバッグ] ビュー

デバッグ セッション中に、[実行とデバッグ] ビューの [変数] セクションで、またはエディターでソースにカーソルを合わせることで、変数と式を検査できます。変数と式の評価は、[コール スタック] セクションで選択されたスタック フレームを基準にしています。

デバッグ セッション中に変数の値を変更するには、[変数] セクションで変数を右クリックし、[値の設定] (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 の拡張機能のページを参照する必要があります。

ただし、1 つ例外があります。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 チート シート

VS Code 拡張機能による他のプログラミング言語のデバッグ サポートの詳細については、以下を参照してください。

• C++
• Python
• Java

VS Code のタスク実行サポートの詳細については、以下を参照してください。

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

独自のデバッガー拡張機能を記述するには、以下を参照してください。

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

よくある質問

サポートされているデバッグ シナリオは何ですか?

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