答案：通过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，然后点击启动按钮。
立即学习“前端免费学习笔记（深入）”；
Glean
Glean是一个专为企业团队设计的AI搜索和知识发现工具
117 查看详情 
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"}
基本上就这些。合理使用复合启动配置能显著提升全栈开发的调试体验。
以上就是如何创建复合启动配置（Compound Launch Configs）来同时调试前端和后端？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/807392.html
微信扫一扫 
支付宝扫一扫 
