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 ファイルの生成を支援します。詳細については、AI を使用した起動構成の生成に 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 行に複数のステートメントが含まれる、縮小 (minify) されたコードをデバッグする場合に便利です。

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

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

関数ブレークポイント

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

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

データ ブレークポイント

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

ログポイント

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

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

ログポイントを追加するには、エディターの左余白を右クリックして「ログポイントの追加...」を選択するか、コマンド パレット (⇧⌘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 の拡張機能のページを確認してください。

ただし、例外が 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 拡張機能によってサポートされています。