如何断点和调试角度模板？

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

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

<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 https://stackblitz.com/angular/kopjlplrpanj?file=src%2Fapp%2Fheroes%2Fheroes.component.html

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

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

例如，以下是我会使用的一些选项：

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

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

2）模板中出现一些错误

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

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

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

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

您将自动转到更新模板代码

欲了解更多信息，请参阅

• 像专业人士一样捕获 Angular 模板错误或我如何创建 Angular 演示 https://medium.com/@a.yurich.zuev/catch-angular-template-errors-like-a-pro-or-how-i-create-angular-demo-e98694977911

Update:

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

{{myVar}}

or

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

Update 2

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

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