如何在VSCode的launch.json中配置同时启动前端和后端的调试任务-VSCode-PHP中文网

vscode 的 launch.json 不支持单个 configuration 同时启动两个程序，需通过 compounds 组合多个 configuration 实现全栈调试：前端用 chrome launch，后端用 node attach，并依赖 prelaunchtask 可靠启动服务与 problemmatcher 精准判断就绪。

如何在vscode的launch.json中配置同时启动前端和后端的调试任务

launch.json 里不能直接“同时启动”两个程序

VSCode 的 launch.json 单个配置项（configuration）只支持启动一个调试会话。所谓“前后端一起调试”，本质是用一个入口触发多个进程，并让 VSCode 能 attach 到至少其中一个（通常是前端自动打开浏览器，后端监听端口并接受 debugger attach）。

常见错误现象：Cannot connect to runtime process, timeout after 10000 ms 或前端能断点、后端完全不进断点——多半是因为没分清 launch vs attach，或端口未就绪就尝试连接。

前端（如 React/Vue）通常用 npm start 启动开发服务器，本身不支持 debug 模式直连，需靠浏览器扩展或 chrome 类型的 launch 配置来打开并 attach
后端（如 Node.js）必须启用 inspector，例如加 --inspect=9229 参数，再用 node 类型的 attach 配置连接
不能把前后端都写成 type: "node" + request: "launch" 放在一个 configuration 里——VSCode 不允许

用 compound 合并 launch 和 attach 配置

真正起作用的是 launch.json 根级的 compounds 字段，它把多个已定义的 configurations 组合起来顺序/并行启动。VSCode 会先等所有 launch 类型完成（比如前端服务跑起来），再执行 attach（比如连后端）。

关键点：后端配置必须设 "request": "attach"，且确保它启动早于 attach 动作；前端配置推荐用 "request": "launch" + "type": "chrome" 自动打开调试浏览器。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

后端 configuration 示例（Node.js）：

{
  "name": "Backend: Node",
  "type": "node",
  "request": "attach",
  "port": 9229,
  "address": "localhost",
  "restart": true,
  "sourceMaps": true,
  "outFiles": ["${workspaceFolder}/dist/**/*.js"]
}

前端 configuration 示例（React，假设已用 react-scripts start 启动）：

{
  "name": "Frontend: Chrome",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

然后在 compounds 中组合：

"compounds": [
  {
    "name": "Fullstack: Frontend + Backend",
    "configurations": ["Frontend: Chrome", "Backend: Node"],
    "preLaunchTask": "start:fullstack"
  }
]

preLaunchTask 必须可靠启动两个服务

preLaunchTask 不是装饰，它决定 compound 能否顺利进行。如果这里失败（比如后端没起来、端口被占），后续 attach 就会超时。

推荐在 tasks.json 中定义一个并发启动任务，用 isBackground: true + problemMatcher 等待服务就绪信号，而不是简单写 npm run dev:frontend && npm run dev:backend —— shell 的 && 是串行阻塞，后端不退出前端就卡住。

Node.js 后端建议加健康检查日志，例如启动后打印 Debugger listening on ws://127.0.0.1:9229/...，再配 "problemMatcher": ["$node-debug"]
前端服务（如 CRA）默认不输出明确就绪信号，可用 "pattern": "Compiled successfully|Starting the development server" 匹配
避免用 concurrent 或 npm-run-all 的 -r 参数——它们不保证子进程持续存活，VSCode 可能误判任务结束

Chrome 调试器连不上前端源码？检查 sourceMapPathOverrides

React/Vue 项目打包后路径和源码路径差异大，chrome 类型配置默认找不到 .ts 或 .jsx 文件。不配 sourceMapPathOverrides，断点只会打在 bundle.js 上，无法单步到源码。

不同构建工具路径映射规则不同，CRA 默认用 webpack:///src/ 前缀，Vite 是 webpack:///./src/，而 Vue CLI 可能是 webpack:///src/ 或 webpack:///project-root/src/——得看实际生成的 main.js.map 里 sources 字段内容。