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

时间:2016-12-15 19:30:36

标签: angular google-chrome-devtools webstorm karma-jasmine angular-cli

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

Chrome developer tools capture

所以我做了一些挖掘,发现你可以将WebStorm设置为run and debug unit tests

测试确实会运行,但WebStorm断点永远不会被击中,并且似乎对正在发生的事情“关闭”。显然,我之前没有使用过WebStorm来运行或调试单元测试,所以我不知道正常情况。

enter image description here enter image description here enter image description here

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

1 个答案:

答案 0 :(得分:2)

我编辑了我的业力配置文件,以包含ts文件和地图文件。当我将它们都设置为include = false并使用ng test从终端启动时,Sources窗口看起来更像是: Chrome Dev Tools

这是我之前看到的,但它让我感到困惑,因为我期待看到自己的文件。但是,如果我在该文件中搜索,我会找到自己的代码: My code in test.ts file

它仍然不会在断点处停止,但它是一个开始。

当我尝试通过Webstorm进行调试时,它仍然看到Mime类型为video / mp2t,所以我猜它在某种程度上干扰了Karma配置文件中设置的Mime类型。

我发现自己想知道在这个框架上工作的开发人员是否构建了除框架之外的任何其他,因为在每一个转折点看起来他们都已经设置了巨大的,不必要的障碍来实际看到你的内容正在发生什么应用

更新

看起来这是Angular-CLI中的bug that comes and goes。似乎今天处于“来”阶段。

更新2

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

enter image description here