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

Question

例如，在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

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

Answer 1

有人可以说Ivy会附带调试模板，但我想我们也可以轻松调试当前的View Engine。

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

1）Angular为可以通过path找到的每个组件生成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}} 

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

有关更多信息，请参见

• 赶上Pro或我如何创建Angular Demo之类的Angular模板错误

更新：

我同意很难理解所生成的代码，因此在简单的情况下，您不需要它，而只需将其打印在某个地方即可查看值，即：

{{myVar}}

要么

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

更新2

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

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