【VSCode】launch.jsonでデバッグ環境を設定する方法

VSCodeは豊富なデバッグ機能を備えており、launch.jsonを設定することでプロジェクトに合わせたデバッグ環境を簡単に構築できます。launch.jsonは「.vscode」フォルダ内に保存され、起動方法や実行構成を定義します。ここでは基本的な作成手順から、Node.jsやPHP、ブラウザなどの実用例を紹介します。

launch.jsonの作成方法

まずはデバッグビューを開き、歯車アイコンをクリックします。初めて設定する場合は.vscode/launch.jsonが自動生成され、基本構成が挿入されます。

.vscode/
└─ launch.json

launch.jsonの基本構成

launch.jsonはconfigurations配列に複数のデバッグ設定を持てます。以下は最小構成の例です。

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

– type: デバッグ対象（例: node, php, pwa-chromeなど）
– request: 実行方法（launch = 起動 / attach = 既存プロセスに接続）
– name: 設定の名前
– program: 実行するファイルやエントリーポイント

Node.jsのデバッグ例

Node.jsアプリを直接起動してデバッグする設定です。

{
  "type": "node",
  "request": "launch",
  "name": "Node.js Debug",
  "program": "${workspaceFolder}/app.js",
  "console": "integratedTerminal"
}

既存のNode.jsプロセスにアタッチする

サーバーを–inspectオプション付きで起動し、VSCodeから接続します。

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Process",
  "port": 9229
}

PHPのデバッグ例（Xdebug利用）

Xdebugを有効化したPHP環境に接続する設定です。拡張機能「PHP Debug」をインストールする必要があります。

{
  "type": "php",
  "request": "launch",
  "name": "Listen for Xdebug",
  "port": 9003
}

ブラウザ（Chrome/Edge）のデバッグ

pwa-chromeタイプを利用すると、Webアプリをブラウザで起動してデバッグできます。

{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src"
}

複数構成をまとめる（compounds）

バックエンドとフロントエンドを同時にデバッグしたい場合は、compoundを定義します。

{
  "compounds": [
    {
      "name": "Full Stack",
      "configurations": ["Node.js Debug", "Launch Chrome"]
    }
  ]
}

便利な変数

launch.jsonでは変数を使って柔軟に設定できます。
– ${workspaceFolder} : ワークスペースのルート
– ${file} : 現在開いているファイル
– ${relativeFile} : ワークスペースからの相対パス

まとめ

launch.jsonを設定することで、VSCodeは強力な統合デバッグ環境として活用できます。Node.jsやPHP、ブラウザアプリなどプロジェクトに応じて構成を切り替えられ、compoundsを使えばフルスタック開発も効率化可能です。まずは基本のlaunch設定を作り、必要に応じて複数構成を追加していくと良いでしょう。