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で開く VS Code Insidersで開く 設定を有効にすることで、エディターの概要ルーラーにブレークポイントを表示できます。

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

ブレークポイントの種類

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

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 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 を使用したデバッグと問題の修正
• デバッグおよび問題修正のための AI チートシート

VS Code 拡張機能による他のプログラミング言語のデバッグサポートについて学ぶには

• C++
• Python
• Java

VS Code のタスク実行サポートについて学ぶには、次へ進んでください

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

独自のデバッガー拡張機能を記述するには、次を訪問してください

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

よくある質問

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

Node.js ベースのアプリケーションのデバッグは、VS Code により Linux、macOS、Windows でデフォルトでサポートされています。その他多くのシナリオは、Marketplace で入手できる VS Code 拡張機能によってサポートされています。