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. 条件 (式、ヒット回数、またはブレークポイントを待機) を編集します。

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

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

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

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

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

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

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

インラインブレークポイントも条件を持つことができます。エディターの左余白にあるコンテキストメニューを通じて、行上の複数のブレークポイントを編集できます。

関数ブレークポイント

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

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

データブレークポイント

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

ログポイント

ログポイントは、デバッガーに中断することなく、デバッグコンソールにメッセージをログとして出力するブレークポイントの一種です。ログポイントは、コードにロギングステートメントを追加したり削除したりする手間を省くことで、時間を節約するのに役立ちます。

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

ログポイントを追加するには、エディターの左余白を右クリックしてログポイントの追加を選択するか、コマンドパレット (⇧⌘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 拡張機能によってサポートされています。