使用 VS Code 调试 React/node/express 应用程序

Question

我正在尝试调试我的 express 应用程序，我已根据 vs 代码（1.13 版）帮助文档配置了我的 IDE。但是当我运行应用程序时，该过程永远不会在断点处停止。

我们正在开发一个使用 webpack/babel 的 react (redux)/node/express 应用程序。

通常的启动脚本在 3000/8443（安全）中启动我们的应用程序。 请找到我的启动配置文件（launch.json）：

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch via NPM",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "start",
                "debug"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "integratedTerminal",
            "sourceMaps": true,
            "outFiles": ["${workspaceRoot}/dist/*/.js"],
            "port": 5858
        }
    ]
}

在启动时，我们收到以下错误：

Cannot connect to runtime process, timeout after 10000 ms - (reason: 
Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:5858).

我在这里遗漏了什么吗？ 我正在使用 osx (10+) 进行开发

谢谢， 桑托什

Answer 1

我建议在您的package.json 中设置一个dev 脚本，如下所示（我包含了启动脚本，以便您弄清楚在您的“开发”脚本中要写什么：

"scripts": {
    "start": "cd dist && node main",
    "dev": "cd dist && node --inspect=5858 main"
},

然后配置您的 launch.json 以使用该脚本（启动 npm 以侦听调试器）：

{
  // 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",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch via NPM",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run",
        "dev"
      ],
      "port": 5858,
      "sourceMaps": true,
      "outFiles": [
        "${workspaceRoot}/dist/"
      ],
      "cwd": "${workspaceFolder}"
    },
  ]
}

另外，不要忘记将devtool: 'sourcemap' 添加到您的 webpack 配置中，以便在源代码中触发断点。