調試Angular應用程序

我是Angular的新手，我試圖按照https://angular.io/tutorial上的教程進行操作。我的問題是，在我的監視列表中的chrome中，我看不到const HEROES。它說「不可用」。我錯過了什麼？有可能在觀察列表中看到它？調試Angular應用程序

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; 
    } 
}

來源

2017-08-14 Itay.B

也讀[你需要知道有關調試角應用一切（https://blog.angularindepth.com/everything-you-need-to-know-about-debugging-angular-applications-d308ed8a51b4） –

當您的網站完全呈現時，您將失去您的變量的封閉。如果您仍想調試該變量，則可以在javascript中使用調試器行或手動設置斷點。例如。

var a = b; 
debugger;

然後打開DevTools，你應該登陸調試器斷點。

大多數開發人員使用類似https://augury.angular.io/的工具來調試他們的應用程序。

來源

2017-08-14 08:35:00

「輸封閉「意味着變量已經死了？如果是這樣，我不明白該應用程序如何能夠改變它的價值。 –

https://developer.mozilla.org/en/docs/Web/JavaScript/Closures 您處於與您正在觀看的變量不同的背景下。看第一個例子：假設你在第8行之後在調試器中：即使會有一個警告說'Mozilla'，變量是在另一個函數中定義的，如果你有一個關於該變量的觀察者，它將是未定義的，因爲它不在'根'關閉中，而是在另一個關閉中。 –

明白了。現在我只需要使用它:)。 –

調試Angular應用程序

回答

相關問題