答案：VS Code通过复合调试配置实现全栈调试，提升前后端联调效率。具体描述：在launch.json中定义前端（如React）和后端（如Node.js）的调试配置，并通过compounds组合为“Full Stack Debug”任务，同时启动Chrome和Node调试器；需确保后端用nodemon --inspect运行、前端启动开发服务器且API指向本地后端；配置后可在前后端设断点，观察请求链路与变量状态，实现一键全栈调试。
在现代Web开发中，前端和后端往往需要协同工作。当问题出现在两者交互过程中时，单独调试某一方很难定位根本原因。VS Code 提供了强大的多目标调试能力，让你可以同时启动并调试前端和后端服务，极大提升排查效率。
配置复合调试环境
VS Code 支持通过 复合启动配置（compound launch configuration） 同时运行多个调试任务。你需要在项目根目录的 .vscode/launch.json 中定义多个调试器配置，并将它们组合起来。
例如，假设你的项目包含一个使用 Node.js 编写的后端 API 和一个基于 React 的前端应用：
示例 launch.json 配置：
立即学习“前端免费学习笔记（深入）”；
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Backend",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/server/index.js",
"console": "integratedTerminal",
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
},
{
"name": "Debug Frontend",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/client/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${workspaceFolder}/client/src/*"
}
}
],
"compounds": [
{
"name": "Full Stack Debug",
"configurations": ["Debug Backend", "Debug Frontend"],
"stopAll": true
}
]
}这个配置中，compounds 定义了一个名为 “Full Stack Debug” 的复合任务，它会同时启动后端 Node 调试器和前端 Chrome 调试器。
确保服务能正确启动
仅仅配置调试器还不够，你还需要确保前后端服务能在调试模式下正常运行。通常需要配合 tasks.json 或直接在命令行中启动开发服务器。
更推荐的做法是使用 Code Runner 或在 package.json 中定义脚本，然后通过 VS Code 的终端手动启动服务。也可以结合 Task + Compound 实现自动化。
常见做法：
- 后端：使用
nodemon --inspect启动，监听调试连接 - 前端：使用
npm start启动开发服务器（如 Create React App 内置支持 sourcemap） - 确保前端请求的 API 地址指向本地后端（如
http://localhost:5000）
设置断点并观察调用流程
配置完成后，选择 “Full Stack Debug” 启动调试。VS Code 会在两个进程中都启用调试器。
你可以在后端接口处理函数中设置断点，也能在前端的 useEffect、事件回调等位置设断点。当用户操作触发请求时，你可以清晰地看到数据从前端发出，再到后端被接收和处理的完整链路。
关键优势：
- 前后端代码均可单步调试
- 查看变量值、调用栈、网络请求参数
- 快速判断问题是出在请求构造、网络传输还是接口逻辑
基本上就这些。只要配置一次，之后就能一键进入全栈调试状态，省去来回切换的麻烦。虽然设置稍复杂，但对联调阶段的帮助非常大。
