使用 WebPack 和 Feathers 进行节点调试

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

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

谢谢

Answer 1

根据您的设置，我建议您尝试 Visual Studio 代码，OS 文本 editor/ide 基于 Electron 以及 Atom 编辑器。

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

Debugging - link 关于如何在 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 以调试模式启动，在控制台中你会看到类似 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 中进入调试模式，在测试文件中放置断点，在下拉列表中选择 'Attach' 或 'Mocha Debug' 并开始调试 (F5)

p.s。 VS code 也有 first-class TypeScript 支持，可能对你有帮助。

使用 WebPack 和 Feathers 进行节点调试

Node debugging with WebPack and Feathers

javascript

node.js

npm

node-debugger

webpack