代码之家 › 专栏 › 技术社区 › Totty.js

如何中断和调试角度模板?

angular

2

Totty.js · 技术社区 · 7 年前

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

<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

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

1 回复 | 直到 7 年前

1

10

yurzui 6 年前

有人可以说调试模板将与常春藤,但我想说,我们也可以很容易地调试当前的视图引擎。

1) 为每个可以通过路径找到的组件生成一个工厂 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

0

Ashish 5 年前

您可以执行以下步骤:

打开开发人员控制台
转到子选项卡:第页
你通常有你的角度项目文件 webpack:// 或 ng:// 或者类似的menuItem文件夹,找到你的角度项目文件。
然后,找到模板文件
在要查看数据的行上,以及
您通常会在 _co 磁场