【问题标题】：Debugging Karma/Jasmine Tests with Angular 2 in WebStorm在 WebStorm 中使用 Angular 2 调试 Karma/Jasmine 测试
【发布时间】：2017-05-01 12:21:57
【问题描述】：

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

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

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

我确定我只是遗漏了一些东西，但是有这么多不熟悉的技术融合在一起，我不确定要拉出什么线索。

【问题讨论】：

如果你在开发工具的Sources选项卡中看不到你的文件，这意味着它们没有加载到VM中；您也不太可能在 Webstorm 中调试它们。您的配置一定有问题。此外，您的测试似乎没有被执行，响应被 Chrome 拒绝，因为 MIME 类型未知 - 你不关心吗？
是的，这似乎是 Webstorm 的产物。我会写下我在答案中找到的内容。
不，这不太可能是 WebStorm 问题。看起来服务器应用程序托管在（或涉及 ajax 等的其他服务器）出于安全原因发送响应标头“X-Content-Type-Options：nosniff”，这使得浏览器阻止执行具有未知 MIME 的脚本输入
它没有托管在单独的服务器上。它只是通过按下 Webstorm 中的小错误按钮启动的。我认为从终端启动与“ng test”不同的服务器（因为 ng test 不会发生该错误），但具体发生的事情是由 webstorm 完成的。所以，是的，它与 Webstorm 完全相关。 Webstorm 中可能有一个设置来解决这个问题，但我还没有找到它。
WebStorm 中没有设置会影响这一点。 “小错误按钮”只是在调试器中运行当前选择的运行配置...如果它是 karma 运行配置，它会运行 karma 将您的 karma.config.js 传递给它 - 仅此而已。 ng test 做同样的事情 - 但它首先构建你的项目

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

【解决方案1】：

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

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

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

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

我发现自己想知道在这个框架上工作的开发人员是否构建了除框架之外的任何东西，因为他们似乎每时每刻都设置了巨大的、不必要的障碍来实际查看你的应用程序。

更新：

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

更新 2

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

【讨论】：

我很好奇为什么我的回答被否决了。它可能无法让某人一路找到解决方案，但至少这是他们不必通过自己的实验找到的进展和信息。