angular - 如何断点和调试 Angular 模板？

Question

例如，在 React 中，您可以在 View /模板中放置一个断点并检查发生了什么。

编辑:假设我想看看这里发生了什么:

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</div>

https://stackblitz.com/angular/kopjlplrpanj?file=src%2Fapp%2Fheroes%2Fheroes.component.html

我想检查此模板范围内的变量。查看它们的值。

Answer 1

有人会说调试模板会随 Ivy 一起提供，但我会说我们也可以轻松调试当前的 View 引擎。

例如，这里有一些我会使用的选项:

1) Angular 为每个组件生成 ngFactory，可以通过路径 ng://ModuleName/ComponentName.ngfactory.js 找到。

每个工厂都包含两个方法 updateDirectives 和 updateRenderer，您可以在其中调试变量。

2) 在模板中犯了一些错误

<h2>{{herox.name | uppercase}} Details</h2>
         ^^^^

现在您可以在您的控制台中找到目标位置

3) 将以下代码放在模板的开头

<ng-container *ngIf="1; let x='ngIf; debugger'">{{x}} 

你会自动移动到更新模板代码

更多信息见

• Catch Angular template errors like a pro or how I create Angular Demo

更新:

我同意很难理解生成的代码，因此在简单的情况下您不需要它，您可以通过在某处打印它来查看值，即:

{{myVar}}

或

<div [attr.debug-var]="someVar">

更新2

{{ this.constructor.__proto__.constructor('', 'debugger')() }}

https://twitter.com/yurzui/status/1179436748826394626