如何断点和调试角度模板? [英] How to breakpoint and debug angular templates?

问题描述

例如，在 React 中，您可以在视图/模板中放置一个断点并检查发生了什么.

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

{{hero.name |大写}}详情
<div><span>id:</span>{{hero.id}}</div><div><标签>名称:<input [(ngModel)]="hero.name" placeholder="name">

2) 模板出错

{{herox.name |大写}}详情
^^^^

现在您可以在控制台中找到目标位置

3) 将以下代码放在模板的开头

{{x}}

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

更多信息见

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

更新:

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

{{myVar}}

或

更新 2

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

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

For example, in React you can put a breakpoint in your view/template and check what is going on.

Edit: Let's say I want to see what is going on here:

<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

I want to inspect the variables in the scope of this template. See their values.

解决方案

Someone can say that debugging templates will come with Ivy but I would say that we can also easy debug current View Engine.

For example, here are some options I would use:

1) Angular generates ngFactory for each component which can be found by path ng://ModuleName/ComponentName.ngfactory.js.

Each factory contains two methods updateDirectives and updateRenderer where you can debug your variables.

2) Make some mistake in template

<h2>{{herox.name | uppercase}} Details</h2>
         ^^^^

Now you can find the target place in your console

3) Put the following code at the beginning of your template

<ng-container *ngIf="1; let x='ngIf; debugger'">{{x}} 

And you will automatically moved to updating template code

For more info see

• Catch Angular template errors like a pro or how I create Angular Demo

Update:

I agree that it's hard to understand the generated code so that in simple cases you do not need that and you can just look at the value through printing it somewhere, i.e:

{{myVar}}

or

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

Update 2

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

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

这篇关于如何断点和调试角度模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！