💻 6月3日の MS Build で開催される VS Code Live に参加しましょう。

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 に新しい構成を追加するには、次のいずれかの方法を使用します

  • 構成の追加ボタンを押し、スニペットを選択して事前定義された構成を追加します。
  • カーソルが configurations 配列内にある場合は、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 つのコア デバッグ モードがあり、それぞれ異なるワークフローと開発者のセグメントを対象としています。ワークフローによっては、プロジェクトにどちらのタイプの設定が適しているか混乱することがあります。

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

起動とアタッチの違いを説明する最良の方法は、起動構成を 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 VS Code で開く VS Code Insiders で開く と attach がサポートされています。
  • name - デバッグ起動構成ドロップダウンに表示されるわかりやすい名前。

以下は、すべての起動構成で使用できるオプションの属性です

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

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

  • program - デバッガーの起動時に実行する実行可能ファイルまたはファイル
  • args - デバッグするプログラムに渡される引数
  • env - 環境変数（値 null を使用して変数を「未定義」にすることができます）
  • envFile - 環境変数を含む .env ファイルへのパス
  • 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
      }
    }
  ]
}

プラットフォーム固有のセクションを使用して、presentation プロパティを制御することもできます。次の例では、macOS の「デバッグ」ドロップダウンから構成が非表示になります

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js",
      "osx": {
        "presentation": {
          "hidden": true
        }
      }
    }
  ]
}

グローバルな起動構成

すべてのワークスペースで利用可能な起動構成を定義できます。グローバルな起動構成を指定するには、 launch VS Code で開く VS Code Insiders で開く ユーザー設定に起動構成オブジェクトを追加します。この 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"]
}

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

複合起動構成

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

並行して起動する 2 つ以上の起動構成の名前を一覧表示するには、configurations 属性を使用します。

オプションで、個々のデバッグ セッションが開始される前に実行される 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 の外部（「外部的」に）で開かれます。

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 が設定されていないか、そのファイルに構文エラーがあることです。あるいは、フォルダーを開かないデバッグでは起動構成がサポートされていないため、フォルダーを開く必要がある場合もあります。

5/28/2026
© . This site is unofficial and not affiliated with Microsoft.