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

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为每个可以通过路径ng://ModuleName/ComponentName.ngfactory.js找到的组件生成ngFactory。

每个工厂都包含两个方法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">

Answer 2

您可以执行以下步骤：

1. 打开开发者控制台
2. 转到：来源标签
3. 转到子选项卡：页面
4. 您的 Angular 项目文件通常位于 webpack:// 或 ng:// 或此类相关的 menuItem 文件夹中，请找到您的 Angular 项目文件。
5. 然后，找到您的模板文件
6. 在要查看数据的行上附加断点，并且
7. 重新加载您的页面或执行该部分代码或执行该代码的事件（如果该部分代码在单击按钮或鼠标悬停时运行，请继续单击按钮或悬停鼠标）
8. 您通常会在断点范围
的 _co 字段中看到您的数据