在 WebStorm 中调试 angular-cli答案

【问题标题】：Debugging angular-cli in WebStorm在 WebStorm 中调试 angular-cli
【发布时间】：2016-10-27 08:32:05
【问题描述】：

使用带有 WebStorm (PhpStorm) 的 angular-cli 启动项目。我想使用调试 - 它似乎工作但它不是：/

这里是一些屏幕截图。

这是我的第一个断点

下一个断点

还有我的设置

【问题讨论】：

重新创建；但是，这在 Chrome 开发工具中也不适用于我 - 我什至无法在我喜欢的地方创建断点......例如，当我将断点添加到 title = 'app works!'; 时，它会立即移至关闭类的行'}';构造函数中方法调用的断点实际上是在方法返回语句的行中创建的。所以看来，无论是生成的源图还是 V8 本身都有问题
我也有同样的问题。调试一直在进行，直到我达到大约 20 个组件。
我认为 Angular CLI 生成的源映射与您的原始源代码不匹配，请参阅stackoverflow.com/a/54883663/706012

标签： debugging phpstorm webstorm angular-cli

【解决方案1】：

现在已使用 angular-cli beta19-3 (https://github.com/angular/angular-cli/issues/1519) 修复此问题。请尝试更新；作为一种解决方法，您可以通过将cheap-module-source-map 更改为source-map 来编辑node_modules/angular-cli/models/webpack-build-development.js

【讨论】：