🚀 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 チャットプロンプトを入力して、デバッグ構成を生成します。

    または、「express アプリのデバッグ構成を生成 #codebase」のようなカスタムプロンプトを入力することもできます。

    これは、ワークスペースに異なる言語のファイルがある場合に役立ちます。

    注

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

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

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

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

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

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

    Screenshot that shows the launch configuration dropdown.

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

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

起動構成とアタッチ構成の比較

VS Code には、起動と アタッチ という 2 つのコアデバッグモードがあり、これらは 2 つの異なるワークフローと開発者セグメントを処理します。ワークフローによっては、プロジェクトに適した構成タイプを理解するのが難しい場合があります。

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

起動とアタッチの違いを説明する最良の方法は、起動構成を、VS Code がアタッチする 前 にデバッグモードでアプリを起動する方法のレシピと考えることです。一方、アタッチ構成は、既に 実行されているアプリまたはプロセスに VS Code のデバッガーを接続する方法のレシピです。

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

launch.json の属性

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

launch json suggestions

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

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

  • 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 接続のリッスンを開始します。ポートはデバッグコンソールで通知され、通常、開発者はブラウザーアプリケーションに http://localhost:3000 と入力します。

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

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

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%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://localhost:5001" に一致します。
  • uriFormat: "http://localhost:%s"
  • webRoot: "${workspaceFolder}"

任意の起動構成をトリガーする

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

名前付き起動構成は、serverReadyAction を持つ構成と同じファイルまたはフォルダーにある必要があります。

serverReadyAction 機能の動作例を次に示します

次のステップ

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

よくある質問

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

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

04/03/2025