如何在我的项目中使用 Chrome 调试 Angular *ngIf 结构指令？

Question

我想将 Angular 源代码/源映射附加到我生成的 Angular CLI 项目，这样我就可以调试像 Chrome 中的 *ngIf 这样的指令。

是否可以使用一些 angular.json 配置/源映射以某种方式将调试器附加到 ng_if.ts ...？或者是否有在开发模式下添加源映射的设置，以便我可以单步执行任何带有源映射的第 3 方库？

如果我在 Chrome 中按 Ctrl + O 然后键入 ngIf 或 ng_if 列表菜单中没有该文件

编辑：提供供应商源地图时的样子（参见已接受的答案）：

Answer 1

这也让我很好奇。我从来不需要调试 angular 源代码，但为什么不需要。

似乎 ng cli 有一个 vendorSourceMap 标志在某些时候被弃用了，新的方法是通过 angular.json 文件从 v7.2 开始（https://blog.ninja-squad.com/2019/01/09/angular-cli-7.2/):

"serve": {
  "options": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    },
  ...
}

Answer 2

在开发人员资源面板中按 Ctrl + P 并输入 ngIf 指令在 angular/common 模块中执行的模块名称所以输入 common.js.

然后为NgIF寻找class名称然后你可以设置断点

you are looking at javascript version, all core module already build so the can look overwhelming but you can check the source of the NgIf at github to see the typescript source.

如何在我的项目中使用 Chrome 调试 Angular *ngIf 结构指令？

How to debug Angular *ngIf structural directive using Chrome within my project?

debugging

webstorm

source-maps

angular