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

也读[你需要知道有关调试角应用一切（https://blog.angularindepth.com/everything-you-need-to-know-about-debugging-angular-applications-d308ed8a51b4） –

答

当您的网站完全呈现时，您将失去您的变量的封闭。如果您仍想调试该变量，则可以在javascript中使用调试器行或手动设置断点。例如。

var a = b; 
debugger;

然后打开DevTools，你应该登陆调试器断点。

大多数开发人员使用类似https://augury.angular.io/的工具来调试他们的应用程序。

“输封闭“意味着变量已经死了？如果是这样，我不明白该应用程序如何能够改变它的价值。 –

https://developer.mozilla.org/en/docs/Web/JavaScript/Closures 您处于与您正在观看的变量不同的背景下。看第一个例子：假设你在第8行之后在调试器中：即使会有一个警告说'Mozilla'，变量是在另一个函数中定义的，如果你有一个关于该变量的观察者，它将是未定义的，因为它不在'根'关闭中，而是在另一个关闭中。 –

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

调试Angular应用程序

相关推荐