答案：通过VS Code的复合启动配置可同时调试前后端。首先在launch.json中定义独立的前后端调试配置，然后添加compounds字段组合它们，最后在运行面板选择复合配置启动，实现一键调试全栈应用。
在现代 Web 开发中，前端和后端通常作为独立服务运行。为了提高调试效率，可以使用 VS Code 的复合启动配置（Compound Launch Configs）同时启动并调试两个服务。以下是具体操作步骤。
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，然后点击启动按钮。
立即学习“前端免费学习笔记（深入）”；
- 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" } 基本上就这些。合理使用复合启动配置能显著提升全栈开发的调试体验。
相关标签：
vue react vscode js 前端 node.js json node 浏览器 端口 后端 栈 vs code json chrome npm 栈 JS console 对象 vscode