node.js - 启动用于调试节点服务器的配置并同时响应应用程序

Question

我有一个带有后端和前端的 MERN 堆栈应用程序。我需要同时调试前端和后端。

我有以下配置。

package.json服务器：_

  "scripts": {
    "start": "node server",
    "server": "nodemon server",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },

package.json客户：_

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm build build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

启动配置：

.vscode > 启动.json：

{
  "configurations": [
    {
      "name": "Server",
      "type": "node",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/server.js"
    },
    {
      "name": "Client",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "npm: dev"
    }
  ]
}

.vscode > 任务.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "label": "npm: dev",
      "detail": "concurrently \"npm run server\" \"npm run client\""
    }
  ]
}

运行服务器/客户端配置后，应用程序运行没有任何错误。react 应用程序在谷歌浏览器中打开localhost:3000。但是，客户端或服务器中的任何断点都没有被命中。

VS 代码版本：1.62.2