用于启动前端和后端进行调试的 VS Code 设置

Question

我正在尝试在 vs 代码中启动并运行和调试一个简单的反应前端和 nodejs 后端。 我正在使用复合启动配置来同时启动"客户端"和"服务器"。 nodejs 后端是为我自动启动的，但我总是必须在控制台中执行npm start才能让客户端连接。 我看到的所有教程都表明，此步骤必须在 vs 代码中运行调试配置之前进行。 vs 代码是否不可能像 nodejs 后端那样启动前端。

这是我的launch.json的样子：

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"compounds": [
    {
        "name": "Client+Server",
        "configurations": [ "Server", "Client" ]
    }
],
"configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Server",
        "program": "${workspaceFolder}/server/server.js"
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Client",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}/client/src/index.js"
    }
]
}

Answer 1

我从一开始就

在启动调试会话时遇到了一些问题，所以我决定启动nodejs服务器然后附加调试器。

我

发现这个配置对我有用。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach Server",
      "restart": true,
      "port": 9000
    }, {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Client",
      "port": 9001,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/dist",
      "sourceMaps": true
    }
  ],
  "compounds": [
    {
      "name": "Attach Client+Server",
      "configurations": ["Attach Server", "Launch Client"]
    }
  ]
}

以下是我用于package.json的一些脚本。

{
  "scripts": {
    "prestart": "rollup -c -w",
    "start": "nodemon --ignore '*.ts' --inspect=9000 ./dist/server/index"
  },
}

我必须使用nodemon来检测更改并重新启动节点服务器。

但是，如果您的 React 应用程序需要与节点应用程序分开启动，那么我建议使用 http-server 之类的东西来启动 React 应用程序的本地服务器。然后使用 concurrently 同时启动这两个应用程序。您的package.json可能如下所示：

{
  "scripts": {
    "prestart": "rollup -c -w",
    "start:client": "http-server ./dist/client/",
    "start:server": "nodemon --ignore '*.ts' --inspect=9000 ./dist/server/index",
    "serve": "concurrently "npm:start:client" "npm:start:server""
  },
}

资源 VS 代码调试配置：https://code.visualstudio.com/Docs/editor/debugging

Answer 2

客户端需要npm start的原因是因为您指的是 http://localhost:3000

npm start实际上会运行一个迷你Web服务器来提供 http://localhost:3000 上的HTML文件

另一种方法是在 src 上使用类似 http-server 的东西，这将具有相同的效果

Answer 3

若要在开始时启动前端服务器，还需要添加其他配置以运行前端的npm start。

由于您的 React 应用程序位于子目录中，因此您还需要指定包含带有 --前缀的 package.json 的目录。

您可能还希望禁用由 npm start 启动的浏览器，该浏览器无需调试即可运行，您可以通过指定 "env": { "BROWSER": "none" } 来执行此操作。

以下是在您的情况下可以完成的操作：

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"compounds": [
    {
        "name": "Client+Server",
        "configurations": [ "Server", "Client React", "Client" ]
    }
],
"configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Server",
        "program": "${workspaceFolder}/server/server.js"
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Client",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}/client/src/index.js"
    },
    {
        "command": "npm start --prefix ${workspaceFolder}/client",
        "name": "Client React",
        "request": "launch",
        "type": "node-terminal",
        "env": { "BROWSER": "none" }
    }
]
}

这样，您就不必使用http服务器。