How to breakpoint and debug angular templates?

Question

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.

Answer 1

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