Angular CLI 1.7.0和Visual Studio Code - 无法设置断点

Question

我正在使用Visual Studio Code中的Chrome Debugger插件来调试Angular应用程序.在升级到使用angular/cli@1.7.0之后,我们在调试时不再能够在VS Code中的typescript代码中找到断点.如果我们回滚到angular/cli@1.6.7,断点会再次开始工作.

这是我的ng -v输出:

Angular CLI: 1.7.0
Node: 9.2.0
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack: 3.11.0

还有其他人遇到过这种情况吗？

Answer 1

对于遇到这种情况的人来说,修复是修改你的launch.json sourceMapPathOverrides,如下所示:

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*" 
}

这为我修复了最新的@ angular/cli(版本1.7.3).

在这里找到答案.

Answer 2

Angular CLI 7.2.2：

Webstorm / Intellij-断点从未命中，VSCode-断点未验证/从未命中，Chrome调试器 -断点命中完美。

解决方案：在angular.json中，将evalSourceMap设置为“ false”。

这将触发Angular CLI在后台使用的Webpack，以生成到原始源代码（“ source-map”）的源映射，而不是生成的代码（“ eval”）。https://webpack.js.org/configuration/devtool

请参阅node_modules @ angular-devkit \ build-angular \ src \ angular-cli-files \ models \ webpack-configs \ browser.js下

当然，您可以修改browser.js文件来为devtool设置其他值。

Answer 3

是的，这里也是一样。

有时我可以遇到一些困难到达我想要的断点（问题似乎与源映射有关，但调试器仍然有效）。

我尝试摆弄 VS-Code 调试器启动配置中的一些设置（“sourceMaps”和“trace”），但无济于事。

最终我将 @angular/cli 回滚到 1.6.8，它再次正常工作。

编辑：忘记提及，以防它帮助某人搜索此问题 - 开始调试时，断点从源文件中消失，并且其选项卡标记为“来自源映射的只读内联内容”。

另外，@angular/cli 1.7.1 没有解决这个问题。