同时启动服务器和客户端并能够使用断点 - 使用 VS 代码调试器

Question

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

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

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

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

下面是我在 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}"
    }
  ]
}

Answer 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运行和调试下拉列表中可见

提示

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

同时启动服务器和客户端并能够使用断点 - 使用 VS 代码调试器

Launch server and client simultaneously with ability to use breakpoints - using VS Code Debugger

visual-studio-code

vscode-debugger

提示