在vscode中，同时调试后端和前端的明确方法是什么？

Question

似乎有100万的发射配置，你尝试的越多，你就越困惑。

从2/6/22开始，启动调试器的方式是什么?因此它既可以用于Nodejs (npm start debug = nodemon --inspect index.js)，也可以用于打包+源地图+前端上的小型化JS。

Answer 1

这取决于您的项目，但是使用VS代码进行的自定义配置并不多见，因为大部分是自动完成的，调试nodejs项目的最小方法是将调试器附加到nodejs运行过程，下面是我的launch.json配置的一个示例：

    {
      "type": "node",
      "request": "attach",
      "name": "Attach to process",
      "sourceMaps": true,
      "processId": "${command:PickProcess}",
      "restart": true,
      "protocol": "inspector"
    },

如果您想从nodejs的起点调试nodejs，因为附加发生在它已经启动之后(如果您使用的是nodemon - nodemon是我们每次进行更改时用于监视代码更改和重新构建-重新运行的工具)：

    {
      "type": "node",
      "request": "launch",
      "name": "Debug watch api",
      "outFiles": [
        "${workspaceFolder}/dist/..." // in my case, i have typescript and my nodejs build goes into that folder
      ],
      "runtimeArgs": ["${workspaceFolder}/node_modules/nodemon/bin/nodemon"],
      "cwd": "${workspaceFolder}",
      "args": ["--config", "nodemon-debug.json"],
      "sourceMaps": true,
      "autoAttachChildProcesses": true,
      "protocol": "inspector",
      "serverReadyAction": {
        "action": "openExternally",
        "uriFormat": "http://localhost:3000",
        "pattern": "<what-string-do-you-want-vscode-to-see-to-open-a-browser-for-you-automatically>"
      },
      "env": {
        "TS_NODE_PROJECT": "tsconfig.build.json",
      }
    },

示例nodemon-debug.json

{
  "$schema": "http://json.schemastore.org/nodemon",
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.js"], // what files to ignore from watching
  "exec": "node --trace-uncaught --nolazy {{pwd}}/src/main.js"
}

通常，您只需要配置.vscode/launch.json文件，vscode就会自动为您进行调试。有关更多详细信息，请参阅https://code.visualstudio.com/docs/editor/debugging。

您可以通过Start additional session同时调试任意多个进程(如果您的api和ui位于两个不同的进程上)。

​

​