如何创建复合启动配置（Compound Launch Configs）来同时调试前端和后端？-VSCode-PHP中文网

如何创建复合启动配置（Compound Launch Configs）来同时调试前端和后端？

夢幻星辰

发布： 2025-09-27 16:06:02

原创

762人浏览过

答案：通过VS Code的复合启动配置可同时调试前后端。首先在launch.json中定义独立的前后端调试配置，然后添加compounds字段组合它们，最后在运行面板选择复合配置启动，实现一键调试全栈应用。

如何创建复合启动配置（compound launch configs）来同时调试前端和后端？

在现代 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，然后点击启动按钮。

立即学习“前端免费学习笔记（深入）”；

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

查看详情

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）来同时调试前端和后端？的详细内容，更多请关注php中文网其它相关文章！