如何在 Visual Studio Code 中使用 Karma/Jasmine 调试单元测试？

Question

我希望能够在 Visual Studio Code 中调试单元测试，但到目前为止情况好坏参半。

我的设置：

launch.json

{
   "version": "0.2.0",
   "configurations": [
           {
              "name": "Debug tests",
              "type": "chrome",
              "request": "attach",
              "port": 9222,
              "sourceMaps": true,
              "webRoot": "${workspaceRoot}"
           }
   ]
}

karma.config.js

customLaunchers: {
   Chrome_with_debugging: {
     base: 'Chrome',
     flags: ['--remote-debugging-port=9222']
   }
}

这似乎在某种程度上起作用，如果我启动 VS Code 调试器，它似乎已附加（底部栏变为橙色）。如果我进行更改，Karma 和调试器也会启动 - 但它总是会在 zone.js 中暂停（顺便说一下，这是一个 Angular 项目），而我不会以任何方式干预：

如果我点击“继续”，它实际上会命中我的断点

我可以检查一些变量，但不是全部，

例如，我看不到 actual 的值传递到 Jasmine 的 expect 方法中。

所以 a) 为什么调试器总是在 zone.js 内暂停 - 测试的代码来自 Redux 减速器并在任何 Angular 上下文之外调用，并且 b) 我在无法检查本地方面缺少什么变量（现在是个大热门）？

Answer 1

在 karma.conf.js 中，我更新了在您的版本中添加的调试选项。

customLaunchers: {
   Chrome_with_debugging: {
     base: 'Chrome',
     flags: ['--remote-debugging-port=9222'],
     debug: true
}}

launch.json 在sn-p下面添加作为启动配置，

{
    "name": "Debug tests",
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}

然后使用以下命令触发测试，

ng test --browsers Chrome_with_debugging

使用 Visual Studio Code 调试选项“调试测试”附加到 UT。有了这个，我可以使用“Visual Studio Code + Debugger for Chrome extension”中的断点来调试单元测试。