VSCode 的 launch.json 不支持单个 configuration 同时启动两个程序，需通过 compounds 组合多个 configuration 实现全栈调试：前端用 chrome launch，后端用 node attach，并依赖 preLaunchTask 可靠启动服务与 problemMatcher 精准判断就绪。
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" 自动打开调试浏览器。
立即学习“前端免费学习笔记（深入）”；
- 后端
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 字段内容。
- 打开开发者工具 → Sources → 找到你的
src/App.tsx，右键 → “Reveal in sidebar”，看左侧显示的路径前缀是什么 - 把这个前缀填进
sourceMapPathOverrides的 key，value 填本地${webRoot}对应路径 - 改完保存后，必须刷新 Chrome 页面（不是重启调试），否则缓存的 sourcemap 不更新
preLaunchTask 的可靠性与 problemMatcher 的精准匹配。 
