title: How to breakpoint and debug angular templates?
body: <p>For example, in React you can put a breakpoint in your view/template and check what is going on.</p>
  
  <p>Edit: Let's say I want to see what is going on here:</p>
  
  <pre><code>&lt;h2&gt;{{hero.name | uppercase}} Details&lt;/h2&gt;
  &lt;div&gt;&lt;span&gt;id: &lt;/span&gt;{{hero.id}}&lt;/div&gt;
  &lt;div&gt;
    &lt;label&gt;name:
      &lt;input [(ngModel)]="hero.name" placeholder="name"&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://stackblitz.com/angular/kopjlplrpanj?file=src%2Fapp%2Fheroes%2Fheroes.component.html" rel="noreferrer">https://stackblitz.com/angular/kopjlplrpanj?file=src%2Fapp%2Fheroes%2Fheroes.component.html</a></p>
  
  <p>I want to inspect the variables in the scope of this template. See their values.</p>