使用断点同时启动服务器和客户端 - 使用 VS Code 调试器答案

【问题标题】：Launch server and client simultaneously with ability to use breakpoints - using VS Code Debugger使用断点同时启动服务器和客户端 - 使用 VS Code 调试器
【发布时间】：2021-12-17 15:10:07
【问题描述】：

我正在处理 Create-React-App，我已将 .launch.json 文件配置为具有 2 个配置

通过 NPM 启动 - 通过npm start 启动服务器
启动 Chrome - 打开客户端并使用断点调试我的网络应用

现在我只能从下拉列表中选择一个选项。所以我在终端中手动运行npm start，然后使用调试器到Launch Chrome 启用断点

但我想知道如何使用 VS Code 调试器同时启动这两个配置。有可能吗？

以下是我在launch.json 中的配置：

  "version": "0.2.0",
  "configurations": [
    {
      // This doesn't stop at breakpoints
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": ["run-script", "start"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "type": "pwa-node"
    },

    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

【问题讨论】：

标签： visual-studio-code vscode-debugger

【解决方案1】：

您可以在launch.json 文件中使用compounds 来同时运行2 个配置。

所以你需要在configurations 之后的launch.json 中添加另一个名为compounds 的数组，如下所示

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": ["run-script", "start"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "type": "pwa-node"
    },

    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ],

  "compounds": [
    {
      "name": "Server + Browser",
      "configurations": ["Launch via NPM", "Launch Edge"]
    }
  ]
}

复合 - Server + Browser 将在 VS Code 的“运行和调试”下拉列表中可见

提示

您也可以使用tasks.jsonset a delay for one of the configs

【讨论】：