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

【问题标题】：How to debug Angular *ngIf structural directive using Chrome within my project?如何在我的项目中使用 Chrome 调试 Angular *ngIf 结构指令？
【发布时间】：2019-09-24 17:42:13
【问题描述】：

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

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

如果我在 Chrome 中按 Ctrl + O 然后输入 ngIf 或 ng_if 列表菜单中没有这样的文件。

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

【问题讨论】：

标签： angular debugging webstorm source-maps

【解决方案1】：

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

似乎有一个用于 ng cli 的 vendorSourceMap 标志在某些时候已被弃用，而新的做法是通过自 v7.2 (https://blog.ninja-squad.com/2019/01/09/angular-cli-7.2/) 以来的 angular.json 文件：

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

【讨论】：

这有所不同，例如，Ctrl + O 现在显示带有源映射的ng_if 源。谢谢！

【解决方案2】：

使用开发者资源面板按 Ctrl + P 并输入 ngIf 指令在 angular/common 模块中存在的模块名称，然后输入 common.js。

然后寻找NgIF的类名然后就可以设置断点了

您正在查看 javascript 版本，所有核心模块都已构建，所以看起来势不可挡，但您可以查看NgIf 的来源 github 上查看 typescript 源代码。

【讨论】：

这也有效，所以赞成 :) 但它没有源映射。所以接受了另一个答案。还是谢谢。