NG 测试中的调试测试

Posted 2023-02-22

【中文标题】NG 测试中的调试测试

【英文标题】：Debug Tests in NG Test

【发布时间】：2017-10-10 12:41:58

【问题描述】：

我正在使用 Angular CLI 和 VSCode，但是当我运行 ng test 时，我的规范文件中的断点似乎都没有被命中？

我需要做一些配置吗？

【问题讨论】：

您是否尝试通过 chrome 开发工具进行调试？您可以将此作为一种解决方法，直到找到正确的方法。据我所知，需要配置.vscode/launch.json文件，就是不知道用什么

这基本上就是我要问的......它可以很好地调试我的代码......只是不知道/理解如何为 ng 测试做这个！

那么，您想在调试模式下运行单元测试吗？您是否正在尝试调试单元测试？

是的，这正是我想做的事

【参考方案1】：

Angular 9 版更新

源文件已被移动，但如果您执行以下步骤，您仍然可以通过这种方式进行调试

在 devtools 中，选择源选项卡 按 CTRL + P 输入您要调试的文件的名称

适用于低于 9 的版本

其他答案是完全有效的答案，但我已经使用 Angular 大约 18 个月了，现在我倾向于在浏览器中使用 - chrome 工具！

运行 ng test 然后 f12 并通过 webpack 上下文找到规范文件。添加一个断点并刷新，它将击中所述断点。根据截图

【讨论】：

UI 中的“DEBUG”按钮怎么样。它的功能是什么？

这对我不起作用。 Webpack 只加载样式（直接在 karma 和 /debug.html 上）。

是的，我刚刚升级到 Angular v9 并且无法执行此操作

还是不行，我可以找到源文件，但是断点不行...

你必须做一些不同的事情。 100% 为我和我的同事工作......根据我为原始问题提出的票证，来自 CLI 团队的指导......github.com/angular/angular-cli/issues/…

【参考方案2】：

这对我有用：

Angular 9.0.6 + Visual Studio Code 1.43.2 Angular 8.2.13 + Visual Studio Code 1.39.2 Angular 7、Angular CLI 1.0.* 和 Windows 7 上的 Chrome。

---

更改配置文件

在您的项目根目录中打开karma.conf.js。在singleRun: false 之后添加,，然后是此部分：

    customLaunchers: 
      ChromeDebug: 
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      
    

将配置添加到.vscode/launch.json。

对于版本 8.* - 9.*（注意 "pathMapping 部分！）：

  "type": "chrome",
  "request": "attach",
  "name": "Unit tests",
  "address": "localhost",
  "port": 9333,
  "sourceMaps": true,
  "webRoot": "$workspaceFolder",
  "pathMapping": 
    "/_karma_webpack_": "$workspaceFolder"
  
,

对于版本 7.*：

  "type": "chrome",
  "request": "attach",
  "name": "Unit tests",
  "address": "localhost",
  "port": 9333,
  "sourceMaps": true,
  "webRoot": "$workspaceFolder"
,

---

开始调试

运行ng test --browsers ChromeDebug

等待 Chrome 浏览器启动。你会在命令行中看到类似这样的内容：

01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency

在您的.spec.ts 文件之一中设置断点。

在 Visual Studio Code 中选择 Unit tests 调试配置并点击 F5（“开始调试”按钮）。

按 Shift+Ctrl+F5 或刷新 Chrome 窗口以重新运行测试并命中断点。

---

为了方便

您还可以修改您的 package.json 并添加一个新脚本：

"test-debug": "ng test --browsers ChromeDebug",

那么下次你想通过调试启动ng test 时只需运行：

npm run test-debug

---

参考资料：

Debugging Jasmine Unit tests running with Karma runner in VS Code Debugging Karma tests with VSCode Angular CLI 8.1.3 Debug Unit Tests configuration - Unverified breakpoint microsoft/vscode-recipes - Chrome Debugging with Angular CLI

【讨论】：

为什么我们必须手动运行ng test？不能是preLaunchTask吗？我已经尝试过，但无法让它很好地工作，但我又不知道自己在做什么。

@steinybot：我发现所有start something on each debugging session 工作流程都很烦人，这就是为什么我更喜欢手动启动它，这就是我使用"request": "attach" 而不是"request": "launch" 的原因。我的任何调试配置都不使用preLaunchTask，但我可以尝试并使用它。到目前为止你尝试了什么？你有 GitHub gist 或类似的东西吗？

ng test --browsers ChromeDebug --watch=true 是一个不错的选择，等到测试运行后再附加调试器。

看点安德烈。即使是现在，这几周对我来说也是如此。在过去的几天里，我读了很多根本不起作用的帖子。

【参考方案3】：

您可以简单地添加一个“调试器” 你想调试和运行的地方

ng test

当 chrome 浏览器打开时，打开开发工具，它将在您的“调试器”上停止

【参考方案4】：

只是添加到其他答案：

关注提到的instructions @titusfx。 在终端运行ng test。 在 Visual Studio Code 调试视图中，从下拉列表中选择 ng test。 如果第一次无法到达断点，您可能需要刷新浏览器。

【参考方案5】：

在 VSCode (1.14.0) 的新版本中，他们遵循此recipe：

您可以完全调试 Angular 应用程序（包括单元测试），方法很简单。

【讨论】：

配方应该更新，我创建了一个错误报告，但现在没有太多活动，所以我没有得到Should I create pull request?问题的答案。无论如何，工作配置在这里：github.com/microsoft/vscode-recipes/issues/225（今天在 Angular CLI 8.3.17 和 Angular 8.2.13 上进行了测试）。

此解决方案对于 VSCode (1.14.0) 或更早版本是显式的。所以，是正确的。看看 A-Shar***i 的回答，也许会有所帮助。

这个解决方案对我有用。 Angular 11.2.4、Angular CLI 11.2.3、VS 代码 1.55.0、Node.js 12.181.3