在 WebStorm 中使用 Angular 2 调试 Karma/Jasmine 测试

Debugging Karma/Jasmine Tests with Angular 2 in WebStorm

我正在尝试调试 WebStorm (2016.3.2) 中的 Angular 2 个测试。我尝试的第一件事就是在 Chrome 开发工具中进行,但实际上我没有在 Sources 中看到能够设置断点的脚本文件。请注意,您可以在 HTML 页面中看到脚本标记,但在 Sources 中没有任何内容。

所以我做了更多的挖掘,发现您可以将 WebStorm 设置为 run and debug unit tests

测试确实 运行,但从未命中 WebStorm 断点,并且似乎 "off" 正在发生的事情。显然,我之前没有使用过 WebStorm 运行 或调试单元测试,所以我不知道正常是什么样子。

我确定我只是遗漏了一些东西,但是有这么多不熟悉的技术汇集在一起​​,我不确定要拉什么线程。

我编辑了我的 karma 配置文件以包含 ts 文件和地图文件。当我将它们都设置为 include=false 并使用 ng test 从终端启动时,Sources window 看起来更像这样:

这是我之前看到的,但它让我感到困惑,因为我希望看到我自己的文件。但是,如果我在该文件中搜索,我会找到自己的代码:

它仍然没有在断点处停止,而是一个开始。

当我尝试通过 Webstorm 对其进行调试时,它仍然将 Mime 类型视为 video/mp2t,因此我猜测它以某种方式干扰了 Karma 配置文件中设置的 Mime 类型。

我发现自己想知道开发者是否在这个框架上构建了其他框架以外的东西,因为他们似乎在任何时候都竖立了巨大的、不必要的障碍来实际看到您的应用中发生了什么。

更新:

看起来这是 Angular-CLI 中的 bug that comes and goes。今天好像是"comes"阶段

更新 2

您可以在 localhost:// 文件夹旁边的 webpack:// 文件夹中找到这些文件。认为您需要的文件将位于明显的站点根目录中是合乎逻辑的,但事实并非如此。