VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio Code のデバッグ構成

複雑なデバッグシナリオやアプリケーションでは、デバッガーの構成を指定するために launch.json ファイルを作成する必要があります。たとえば、アプリケーションのエントリーポイントを指定したり、実行中のアプリケーションにアタッチしたり、環境変数を設定したりする場合です。

VS Codeでのデバッグについてさらに学ぶには、Visual Studio Codeでのデバッグを参照してください。

ヒント

VS Code の Copilot を使うと、プロジェクトの起動構成の作成に役立ちます。Copilot を使用した起動構成の生成に関する詳細情報を入手してください。

起動構成

単純なアプリケーションやデバッグシナリオでは、特定のデバッグ構成なしでプログラムを実行およびデバッグできます。F5 キーを使用すると、VS Code は現在アクティブなファイルの実行を試みます。

しかし、ほとんどのデバッグシナリオでは、デバッグ構成 (起動構成) を作成する必要があります。たとえば、アプリケーションのエントリーポイントを指定したり、実行中のアプリケーションにアタッチしたり、環境変数を設定したりする場合です。起動構成ファイルを作成することには、デバッグ設定の詳細を構成してプロジェクトと一緒に保存できるという利点もあります。

VS Code は、デバッグ構成情報をワークスペース (プロジェクトのルートフォルダー) の .vscode フォルダーにある launch.json ファイル、またはユーザー設定やワークスペース設定に保存します。

次のスニペットは、Node.js アプリケーションをデバッグするためのサンプル構成を示しています。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\app.js"
    }
  ]
}

VS Code は、複数の構成を同時に開始するための複合起動構成もサポートしています。

注

VS Code でフォルダーを開いていない場合でも単純なアプリケーションをデバッグできますが、起動構成を管理したり、高度なデバッグを設定したりすることはできません。

デバッグ構成ファイルの作成

最初の launch.json ファイルを作成するには

  1. [実行とデバッグ] ビューで [launch.json ファイルを作成します] を選択します。

    launch configuration

  2. VS Code はデバッグ環境の検出を試みます。検出できない場合は、手動で選択できます。

    debug environment selector

    選択したデバッグ環境に基づいて、VS Code は launch.json ファイルにスターター構成を作成します。

  3. エクスプローラー ビュー (⇧⌘E (Windows, Linux Ctrl+Shift+E)) で、VS Code が .vscode フォルダーを作成し、launch.json ファイルをワークスペースに追加したことを確認してください。

    launch.json in Explorer

これで launch.json ファイルを編集して、構成を追加したり、既存の構成を変更したりできます。

launch.json に構成を追加する

既存の launch.json に新しい構成を追加するには、次のいずれかの方法を使用します

  • [構成の追加] ボタンを押してから、スニペットを選択して事前定義された構成を追加します。
  • カーソルが構成配列内にある場合は、IntelliSense を使用します。
  • [実行] > [構成の追加] メニュー オプションを選択します。

launch json suggestions

AI を使用して起動構成を生成する

VS Code の Copilot を使用すると、プロジェクトの起動構成を作成するプロセスを高速化できます。Copilot で起動構成を生成するには

  1. ⌃⌘I (Windows, Linux Ctrl+Alt+I) でチャット ビューを開くか、タイトル バーの Copilot メニューから [チャットを開く] を選択します。

  2. /startDebugging チャットプロンプトを入力して、デバッグ構成を生成します。

    または、「generate a debug config for an express app #codebase」のようなカスタムプロンプトを入力することもできます。

    これは、ワークスペースに異なる言語のファイルがある場合に便利です。

    注

    #codebase チャット変数は、Copilot にプロジェクトのコンテキストを提供し、より正確な応答を生成するのに役立ちます。

  3. 提案された構成を適用し、デバッグを開始します。

起動構成でデバッグ セッションを開始する

起動構成でデバッグ セッションを開始するには

  1. [実行とデバッグ] ビューの [構成ドロップダウン] を使用して、[Launch Program] という名前の構成を選択します。

    使用可能な構成のリストは、launch.json ファイル内の構成と一致します。

    Screenshot that shows the launch configuration dropdown.

  2. F5 でデバッグ セッションを開始するか、[実行とデバッグ] ビューの [デバッグの開始] (再生アイコン) を選択します。

または、コマンド パレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) を介して、[デバッグ: 選択してデバッグを開始] でフィルターするか、'debug ' と入力してデバッグしたい構成を選択することで、構成を実行できます。

起動構成とアタッチ構成

VS Code には、起動 (Launch) と アタッチ (Attach) という 2 つの主要なデバッグ モードがあり、これらは 2 つの異なるワークフローと開発者セグメントを扱います。ワークフローによっては、プロジェクトに適した構成タイプがどちらなのか混乱することがあります。

ブラウザーの開発者ツールを使い慣れている場合、ブラウザー インスタンスはすでに開いているため、「ツールから起動する」ことに慣れていないかもしれません。開発者ツールを開くとき、あなたは単に開いているブラウザーのタブに開発者ツールをアタッチしているだけです。一方、サーバーやデスクトップ開発のバックグラウンドから来た場合、エディターにプロセスを起動させ、エディターが新しく起動されたプロセスに自動的にデバッガーをアタッチすることはごく普通のことです。

起動とアタッチの違いを説明する最善の方法は、起動構成を「VS Code がアタッチする前にアプリをデバッグモードで開始する方法のレシピ」と考えることです。一方、アタッチ構成は「すでに実行中のアプリやプロセスに VS Code のデバッガーを接続する方法のレシピ」です。

VS Code のデバッガーは通常、プログラムをデバッグ モードで起動するか、すでに実行中のプログラムにデバッグ モードでアタッチすることをサポートしています。リクエスト (attach または launch) に応じて、異なる属性が必要となり、VS Code の launch.json の検証と提案がそれを助けてくれます。

Launch.json の属性

さまざまなデバッガーやデバッグ シナリオをサポートするための多くの launch.json 属性があります。type 属性に値を指定すると、IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) を使用して、利用可能な属性のリストを確認できます。起動構成で利用できる属性は、デバッガーごとに異なります。

launch json suggestions

あるデバッガーで利用できる属性が、他のデバッガーでも自動的に機能するとは限りません。起動構成に赤い波線が表示された場合は、その上にカーソルを合わせて問題の内容を確認し、デバッグセッションを開始する前に修正してください。

次の属性は、すべての起動構成で必須です

  • type - この起動構成で使用するデバッガーのタイプ。インストールされている各デバッグ拡張機能はタイプを導入します。たとえば、組み込みの Node デバッガーの場合は node、PHP および Go 拡張機能の場合は php や go です。
  • request - この起動構成のリクエストタイプ。現在、launch と attach がサポートされています。
  • name - デバッグ起動構成ドロップダウンに表示される、分かりやすい名前。

以下は、すべての起動構成で利用可能なオプションの属性です

  • presentation - presentation オブジェクトの order、group、hidden 属性を使用して、デバッグ構成ドロップダウンやデバッグクイックピックで構成や複合構成を並べ替え、グループ化、非表示にできます。
  • preLaunchTask - デバッグセッションの開始前にタスクを起動するには、この属性を tasks.json (ワークスペースの .vscode フォルダー内) で指定されたタスクのラベルに設定します。または、これを ${defaultBuildTask} に設定して、デフォルトのビルドタスクを使用することもできます。
  • postDebugTask - デバッグセッションの最後にタスクを起動するには、この属性を tasks.json (ワークスペースの .vscode フォルダー内) で指定されたタスクの名前に設定します。
  • internalConsoleOptions - この属性は、デバッグセッション中のデバッグコンソールパネルの表示を制御します。
  • debugServer - デバッグ拡張機能の作成者のみ: この属性を使用すると、デバッグアダプターを起動する代わりに、指定されたポートに接続できます。
  • serverReadyAction - デバッグ対象のプログラムがデバッグコンソールまたは統合ターミナルに特定のメッセージを出力したときに、Web ブラウザーで URL を開きたい場合。詳細は、以下のサーバープログラムのデバッグ時に URI を自動的に開くセクションを参照してください。

多くのデバッガーは、以下の属性の一部をサポートしています

  • program - デバッガー起動時に実行する実行可能ファイルまたはファイル
  • args - デバッグ対象のプログラムに渡される引数
  • env - 環境変数 (値 null を使用して変数を「未定義」にできます)
  • envFile - 環境変数を含む dotenv ファイルへのパス
  • cwd - 依存関係や他のファイルを見つけるための現在の作業ディレクトリ
  • port - 実行中のプロセスにアタッチする際のポート
  • stopOnEntry - プログラム起動時にすぐに中断する
  • console - 使用するコンソールの種類。たとえば、internalConsole、integratedTerminal、または externalTerminal

変数の置換

VS Code は、一般的に使用されるパスやその他の値を変数として利用可能にし、launch.json 内の文字列での変数置換をサポートしています。つまり、デバッグ構成で絶対パスを使用する必要はありません。たとえば、${workspaceFolder} はワークスペースフォルダーのルートパス、${file} はアクティブなエディターで開いているファイル、${env:Name} は環境変数 'Name' を提供します。

事前定義された変数の完全なリストは、変数リファレンスで確認するか、launch.json の文字列属性内で IntelliSense を呼び出すことで確認できます。

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

プラットフォーム固有のプロパティ

VS Code は、デバッガーが実行されているオペレーティングシステムに依存するデバッグ構成設定 (たとえば、プログラムに渡す引数) の定義をサポートしています。そのためには、launch.json ファイルにプラットフォーム固有のリテラルを配置し、そのリテラル内に対応するプロパティを指定します。

次の例は、Windows でプログラムに "args" を異なる方法で渡す方法を示しています

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

有効なオペレーティングシステムプロパティは、Windows の場合は "windows"、Linux の場合は "linux"、macOS の場合は "osx" です。オペレーティングシステム固有のスコープで定義されたプロパティは、グローバルスコープで定義されたプロパティを上書きします。

type プロパティはプラットフォーム固有のセクション内に配置できません。なぜなら、type はリモートデバッグシナリオで間接的にプラットフォームを決定するため、循環依存が発生するためです。

次の例では、macOS を除き、プログラムのデバッグは常にエントリで停止します

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

グローバル起動構成

すべてのワークスペースで利用可能な起動構成を定義できます。グローバル起動構成を指定するには、launch ユーザー設定に起動構成オブジェクトを追加します。この launch 構成は、ワークスペース間で共有されます。例:

"launch": {
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${file}"
    }]
}

デバッグターゲットへの/からの入出力のリダイレクト

入出力のリダイレクトはデバッガーまたはランタイムに固有であるため、VS Code にはすべてのデバッガーで機能する組み込みのソリューションはありません。

検討すべき 2 つのアプローチを以下に示します

  • デバッグするプログラム (「デバッグターゲット」) をターミナルまたはコマンドプロンプトで手動で起動し、必要に応じて入出力をリダイレクトします。デバッガーがアタッチできるように、適切なコマンドラインオプションをデバッグターゲットに渡すようにしてください。デバッグターゲットにアタッチする「アタッチ」デバッグ構成を作成して実行します。

  • 使用しているデバッガー拡張機能が VS Code の統合ターミナル (または外部ターミナル) でデバッグターゲットを実行できる場合は、シェルリダイレクト構文 (たとえば、「<」や「>」) を引数として渡すことを試みることができます。

    以下は launch.json 構成の例です

    {
  "name": "launch program that reads a file from stdin",
  "type": "node",
  "request": "launch",
  "program": "program.js",
  "console": "integratedTerminal",
  "args": ["<", "in.txt"]
}

    このアプローチでは、< 構文がデバッガー拡張機能を介して渡され、変更されずに統合ターミナルに到達する必要があります。

複合起動構成

複数のデバッグセッションを開始する別の方法は、複合起動構成を使用することです。複合起動構成は、launch.json ファイルの compounds プロパティで定義できます。

configurations 属性を使用して、並行して起動する必要がある 2 つ以上の起動構成の名前をリストします。

オプションで、個々のデバッグセッションが開始される前に実行される preLaunchTask タスクを指定できます。ブール値フラグ stopAll は、1 つのセッションを手動で終了すると、すべての複合セッションが停止するかどうかを制御します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

複合起動構成は、起動構成ドロップダウンメニューにも表示されます。

サーバープログラムのデバッグ時に URI を自動的に開く

Web プログラムの開発では、デバッガーでサーバーコードにヒットするために、通常、Web ブラウザーで特定の URL を開く必要があります。VS Code には、このタスクを自動化するための組み込み機能「serverReadyAction」があります。

以下は、単純な Node.js Express アプリケーションの例です

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

このアプリケーションは、まず「/」URL に「Hello World」ハンドラーをインストールし、次にポート 3000 で HTTP 接続のリッスンを開始します。ポートはデバッグコンソールで通知され、通常、開発者はブラウザーアプリケーションに https://:3000 と入力します。

serverReadyAction 機能を使用すると、構造化プロパティ serverReadyAction を任意の起動構成に追加し、実行する「アクション」を選択できます

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "https://:%s",
    "action": "openExternally"
  }
}

ここで、pattern プロパティは、ポートを通知するプログラムの出力文字列に一致する正規表現を記述します。ポート番号のパターンは括弧で囲まれているため、正規表現のキャプチャグループとして利用できます。この例ではポート番号のみを抽出していますが、完全な URI を抽出することも可能です。

uriFormat プロパティは、ポート番号を URI に変換する方法を記述します。最初の %s は、一致するパターンの最初のキャプチャグループで置換されます。

結果の URI は、URI のスキーム用に構成された標準アプリケーションを使用して、VS Code の外部 (「externally」) で開かれます。

Microsoft Edge または Chrome 経由でのデバッグのトリガー

または、action を debugWithEdge または debugWithChrome に設定することもできます。このモードでは、Chrome または Microsoft Edge のデバッグセッションに渡される webRoot プロパティを追加できます。

物事を少し単純化するために、ほとんどのプロパティはオプションであり、次のフォールバック値を使用します

  • pattern: "listening on.* (https?://\\S+|[0-9]+)" は、一般的に使用されるメッセージ「listening on port 3000」や「Now listening on: https://:5001」に一致します。
  • uriFormat: "https://:%s"
  • webRoot: "${workspaceFolder}"

任意の起動構成のトリガー

場合によっては、ブラウザーのデバッグセッションに追加のオプションを設定したり、まったく異なるデバッガーを使用したりする必要があるかもしれません。これは、action を startDebugging に設定し、pattern が一致したときに開始する起動構成の名前に name プロパティを設定することで実現できます。

指定された起動構成は、serverReadyAction を持つ構成と同じファイルまたはフォルダーにある必要があります。

serverReadyAction 機能の動作例はこちらです

次のステップ

  • タスク - Gulp、Grunt、Jake でタスクを実行する方法、およびエラーと警告を表示する方法について説明します。
  • 変数リファレンス - VS Code で利用可能な変数について説明します。

よくある質問

[実行とデバッグ] ビューのドロップダウンに起動構成が表示されません。何が問題ですか?

最も一般的な問題は、launch.json を設定していないか、そのファイルに構文エラーがあることです。または、フォルダーを開く必要があるかもしれません。フォルダーなしのデバッグは起動構成をサポートしていないためです。

08/07/2025