如何创建复合启动配置（Compound Launch Configs）来同时调试前端和后端？

答案：通过VS Code的复合启动配置可同时调试前后端。首先在launch.json中定义独立的前后端调试配置，然后添加compounds字段组合它们，最后在运行面板选择复合配置启动，实现一键调试全栈应用。

1. 确保已设置独立的启动配置

在 .vscode/launch.json 文件中，确保你已经为前端和后端分别定义了可工作的调试配置。例如：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Backend (Node.js)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/server.js",
      "console": "integratedTerminal"
    },
    {
      "name": "Launch Frontend (React/Vue)",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend/src",
      "browserFocus": true
    }
  ]
}

2. 创建复合启动配置

在 launch.json 的根对象中添加 compounds 字段，将上述两个配置组合起来：

{
  "version": "0.2.0",
  "configurations": [ ... ],
  "compounds": [
    {
      "name": "Debug Full Stack",
      "configurations": ["Launch Backend (Node.js)", "Launch Frontend (React/Vue)"]
    }
  ]
}

注意：configurations 数组中的名称必须与已有配置的 name 完全一致。

3. 启动复合调试

打开 VS Code 的运行和调试侧边栏，在顶部下拉菜单中选择 Debug Full Stack，然后点击启动按钮。

立即学习“前端免费学习笔记（深入）”；

论论App

AI文献搜索、学术讨论平台，涵盖了各类学术期刊、学位、会议论文，助力科研。

下载

• VS Code 会先在集成终端中启动后端服务（Node.js）
• 随后自动打开 Chrome 浏览器并加载前端页面
• 你可以在前后端代码中分别设置断点，进行联合调试

4. 可选：控制启动顺序和依赖

若希望确保后端先启动完成再打开前端页面，可在后端配置中使用 console: "integratedTerminal" 并手动确认服务就绪。更高级的做法是结合 preLaunchTask 使用脚本检测端口占用或添加延迟。

例如，使用 npm script 启动两个服务并由 compound 调用：

"scripts": {
  "dev:debug": "concurrently \"npm run start:backend\" \"npm run start:frontend\""
}

然后在 launch.json 中调用该脚本：

{
  "name": "Launch via Script",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run", "dev:debug"],
  "console": "integratedTerminal"
}