javascript - 使用 WebPack 和 Feathers 进行 Node 调试

Question

我加入了一个使用 Node、Webpack、TypeScript 和 Express/Feathers 构建产品的小组。其他开发人员知道他们在做什么，但到目前为止我只在客户端上使用过 JavaScript，并且实际上只使用了几个小时的 Node。试图找出如何进行调试。具体来说，我的首要任务是修复一些失败的 API 测试。

测试是通过以下方式执行的:

$npm run testserver

我的包裹有:

"scripts": {
....
"testserver": "webpack --config webpack.servertest.config.js && NODE_ENV=test mocha dist/serverTests.js",
....
},

例程是将typescript编译为ES6，然后babel编译为与Node兼容的ES5。

我尝试这样做:

$node-debug dist/serverTests.js

当此 Node 调试调用运行时，结果与 npm 不同。请分享您的经验。

谢谢

Answer 1

根据您的设置，我可以推荐您尝试 Visual Studio Code、基于 Electron 的操作系统文本编辑器/IDE 以及 Atom 编辑器。

要解决您的问题，您可以使用两个 vscode 功能:

• Debugging - 有关如何在 vscode 中调试的文档的链接
• Tasks - 任务管理，例如查看以一些参数等启动的 webpack 配置

首先，让我们尝试适合您的情况的简单解决方案(不需要任务文件):

添加到 testserver --debug-brk 的末尾，用于在 Node.js、brk 中进行调试 - 它只是在第一行停止执行。

"testserver": "webpack --config webpack.servertest.config.js && NODE_ENV=test mocha dist/serverTests.js --debug-brk",

现在，当您npm run testserver时，mocha会以 Debug模式启动，并且在控制台中您将看到类似Debugger Listen on port 5858的内容

第二步，在 vscode 中，您需要向 launch.json 添加一些属性(端口 5858) - 阅读我上面提到的文档中的调试部分:

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Attach", // or e.g. "Mocha Debug"
      "type": "node",
      "request": "attach",
      "port": 5858
    }
  ]
}

就是这样。在 vscode 中进入 Debug模式，在测试文件中放置断点，在下拉列表中选择“附加”或“Mocha 调试”并开始调试(F5)

附:此外，VS code 还具有一流的 TypeScript 支持，可能会对您有所帮助。