通过配置VS Code的复合启动功能，可一键调试全栈应用。1. 确保项目结构包含前端和后端子目录，并使用支持调试的框架；2. 在.vscode/launch.json中定义前后端调试配置，前端通过Chrome调试器连接3000端口，后端以Node.js调试模式启动server.js；3. 使用compounds将多个配置合并为“Debug Full Stack”；4. 安装Chrome或Edge调试扩展；5. 启动时选择“Debug Full Stack”并运行，VS Code将同时启动前后端进程并支持断点调试；6. 可选地通过npm script统一管理启动流程，提升调试一致性与便捷性。
在开发全栈应用时，经常需要同时调试前端和后端。VS Code 支持通过 复合启动配置 实现多目标调试，让你一键启动并调试前后端两个进程。
1. 确保项目结构支持多环境调试
典型的项目结构如下：
my-app/ ├── .vscode/ │ └── launch.json ├── frontend/ │ ├── package.json // 含 "start": "react-scripts start" │ └── src/ ├── backend/ │ ├── package.json // 含 "dev": "nodemon server.js" │ └── server.js
确保前端使用如 Create React App、Vite 等支持调试的框架，后端使用 Node.js + 源码映射（source maps）。
2. 配置 launch.json 支持多进程调试
在 .vscode/launch.json 中定义多个调试配置，并用复合配置组合它们：
立即学习“前端免费学习笔记（深入）”；
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Frontend",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${workspaceFolder}/frontend/src/*"
}
},
{
"name": "Launch Backend",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/backend/server.js",
"cwd": "${workspaceFolder}/backend",
"console": "integratedTerminal",
"outFiles": [
"${workspaceFolder}/backend/**/*.js"
],
"autoAttachChildProcesses": true
}
],
"compounds": [
{
"name": "Debug Full Stack",
"configurations": ["Launch Backend", "Launch Frontend"]
}
]
}
说明：
- Launch Frontend：使用 Chrome 调试器连接运行在 3000 端口的前端应用。
- Launch Backend：以调试模式启动 backend/server.js，通常配合 nodemon 或直接使用 node --inspect。
- compounds：将多个配置合并为一个操作。“Debug Full Stack” 会同时启动前后端调试会话。
3. 安装并配置浏览器调试扩展
确保已安装 Debugger for Chrome 或使用新版 VS Code 内建的 Edge/Chrome 调试支持。若使用其他浏览器，请安装对应调试工具。
如果你使用的是基于 Chromium 的浏览器，上面的 type: "chrome" 可正常工作。也可改为 "type": "msedge" 或使用 browser: "chrome" 显式指定。
4. 启动多目标调试
打开 VS Code 的调试面板，选择启动配置为 Debug Full Stack，点击“运行”按钮或按 F5。
- VS Code 会在集成终端中启动后端服务（需确保 nodemon 或 node 已安装）。
- 自动打开 Chrome 调试前端，加载 http://localhost:3000。
- 你可以在前后端代码中设置断点，调试器会在命中时暂停。
提示： 若前端未自动打开浏览器，检查是否已运行前端服务。也可将前端服务也通过 console: "integratedTerminal" 启动，使用 runtimeExecutable 调用 npm。
5. 可选：通过 npm script 统一管理
可在 compound 中直接调用 npm script，简化流程：
{
"name": "Start Frontend with npm",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "start"],
"cwd": "${workspaceFolder}/frontend",
"console": "integratedTerminal"
}
这样就不依赖外部启动服务，所有内容都在 VS Code 控制之下。
基本上就这些。配置一次后，每次调试只需选中复合配置，一键启动整个应用。不复杂但容易忽略细节，比如路径映射或端口冲突。确保前后端服务端口不冲突，且源码路径正确映射，调试体验就很顺畅。
