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

【问题标题】：How to breakpoint and debug angular templates?如何断点和调试角度模板？
【发布时间】：2019-04-11 14:33:15
【问题描述】：

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

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

【问题讨论】：

您能举个例子说明您要调试的内容吗？
如果我没记错的话，调试模板将附带新的渲染引擎"Ivy"，此时您只能尝试在*.ts 文件中调试此变量
调试在打字稿文件上完成。只需转到您的 chrome 浏览器，按 f12，转到源选项卡，按 crt + P 并打开 (your-file-name).ts 文件并添加调试器。
Html/模板调试在 Angular 中是不可能的。您只能在 .ts 文件中进行调试。
是的，我只需要调试模板，这就是问题所在。 Typescript 文件易于调试。

标签： angular

【解决方案1】：

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

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

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

【讨论】：

谢谢，我明白了，但是该代码看起来与源代码中的模板完全不同，我觉得很难理解。

【解决方案2】：

您可以执行以下步骤：

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

【讨论】：