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 の強力なデバッグ機能の 1 つは、式、ヒットカウント、またはその両方の組み合わせに基づいて条件を設定する機能です。

• 式の条件: 式が 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 ベースのアプリケーションのデバッグは、Linux、macOS、および Windows 上で VS Code を使用して標準でサポートされています。他の多くのシナリオは、Marketplace で利用可能な VS Code 拡張機能によってサポートされています。