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

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

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

标签： angular

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}} 

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

有关更多信息，请参阅

• 像专业人士一样捕捉 Angular 模板错误或我如何创建 Angular Demo

更新：

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

{{myVar}}

或者

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

更新 2

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

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