CODEWITHSUNDEEP
angulartypescript
Itay.B
Itay.B

Reputation: 4119

Debugging Angular app

I'm new to Angular and I'm trying to follow the tutorial on https://angular.io/tutorial. My problem is that in chrome in my watch list, I can't see the const HEROES. It says "not available". What am I missing? It's possible to see it in the watch list?

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="let hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <div *ngIf="selectedHero">
      <h2>{{selectedHero.name}} details!</h2>
      <div><label>id: </label>{{selectedHero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
      </div>
    </div>
  `,
  styles: [`...

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

Upvotes: 1

Views: 545

Answers (1)

Gordon Mohrin
Gordon Mohrin

Reputation: 609

When your website ist fully rendered you lose the closure in which your variable is. If you still want to debug the variable, you can use the debugger line in javascript or set a breakpoint manually. eg. 

var a = b;
debugger;

Then open DevTools and you should land in the debugger breakpoint.

Most devs use a tool like https://augury.angular.io/ to debug their apps.

Upvotes: 2

Related Questions