如何在VS Code中为vue mocha单元测试配置调试？

Question

我设法启动了调试器，但是看起来像VS Code没看到源图。

[当我添加debugger JS语句时，它会在webpack生成的文件main.js中中断（该事件在文件系统中不存在），但是使用它很痛苦。

我有下一个设置：

package.json：

    "scripts": {
        "test:debug": "node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit"
    }

launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug unit tests",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": [
        "test:unit",
        "--inspect-brk"
      ],
      "port": 9229
    }
  ]
}

我尝试了不同的方法来指定源地图，但是没有帮助。

有人能正常工作吗？

Answer 1

launch.json

{
  // 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": "Mocha Tests",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "test:debug"],
      "port": 9229,
    }
  ]
}

package.json

"test:debug": "vue-cli-service test:unit --inspect-brk",

在测试代码中添加一行“调试器”行以开始检查，然后将在vscode中打断点。否则，将--watch添加到“ test：debug”，然后您的断点将命中，而无需调试器行，如下所示：

"test:debug": "vue-cli-service test:unit --inspect-brk --watch",