您的位置：首页 > Web前端 > AngularJS

使用Angular Augury调试代码

2020-05-05 12:35 1536 查看

Augury是一个开放源代码工具，允许开发人员分析和调试 Angular 2和4应用程序。

现代的Web浏览器提供了开发人员控制台来检查页面上的各种元素，这在尝试调试标记，样式和脚本时非常方便。但是，此控制台不足以调试通常具有许多组件，事件，属性和单独的路由系统的Angular应用程序。

Augury是专门为Angular应用程序设计的工具。它是针对Angular 2+应用程序的开源调试和概要分析工具。

Augury只是一个易于使用的Chrome扩展程序，因此您无需花费数小时学习如何使用此工具。我们将构建一个示例Angular应用，然后通过探索项目的各个部分来了解Augury的实际应用。所以，让我们开始吧！

您好，Augury！

Augury以树的形式可视化应用程序的结构，显示组件及其依赖关系之间的关系。它还允许您检查对象的属性并即时更改它们。最重要的是，您可以轻松查看特定组件的源代码，根据需要插入断点，使用事件等。最后，您可以浏览应用程序的路由系统，以及查看所有使用的模块的完整列表。

Augury仅可作为Chrome扩展程序使用（不幸的是，还没有Firefox支持），安装它就像转到此页面并按Install按钮一样简单。之后，您可以按Ctrl + Shift + I （Windows / Linux）或Cmd + Opt + I （macOS）打开开发人员工具。您会注意到出现了一个名为Augury的新标签。切换到该选项卡后，您将看到应用程序的结构或短语“此应用程序不是Angular应用程序”。我注意到，有时可能需要重新打开开发者控制台才能使Augury正确分析页面，因此请当心。

现在我们已经安装了Augury，让我们继续下一节并准备将用作操场的示例应用程序！

构建示例应用

为了查看Augury的运行情况，我们需要进行一些调试，对吗？在本节中，我将快速指导您完成创建一个非常简单的应用程序的过程（宽松地基于Angular官方教程中的示例应用程序），列出一些用户并允许您对其进行编辑。或者，您可以从我的GitHub存储库中获取源代码。

在开始之前，如果尚未安装Angular CLI ，请在您的计算机上安装它：

npm install -g @angular/cli

接下来，创建新项目的框架：

ng new sitepoint-augury

通过调整src / app / app.component.ts文件来更改应用程序的标题：

// ...

export class AppComponent {
title = 'Augury Demo';
}

通过删除到代码生成器自动添加的文档的所有链接来调整

src/app/app.component.html

，并添加

<app-users></app-users>

行：

<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>

<app-users></app-users>

当然，我们需要一个

User

组件，因此现在通过运行生成它：

ng generate component users

通过以下方式更改

src/app/users/user.component.ts

文件：

import { Component, OnInit } from '@angular/core';
import { User } from './user.model'; // <--- 1
import { UserService } from './user.service'; // <--- 2

@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users: User[];

selectedUser: User;

onSelect(user: User): void { // <--- 3
this.selectedUser = user;
}

constructor(private userService: UserService) { } // <--- 4

ngOnInit() {
this.getUsers(); // <--- 5
}

getUsers(): void { // <--- 6
this.users = this.userService.getUsers();
}

}

这里要注意的主要事项：

我们正在导入将在稍后创建的
```
User
```
模型。
我们还将导入
```
UserService
```
。它只会返回硬编码用户的列表，但让我们假设它们是从某个远程位置获取的。
我们允许通过单击来选择用户。当前选择的用户存储在单独的
```
selectedUser
```
属性中。
使用依赖项注入机制连接
```
userService
```
。
组件初始化后，加载用户列表。
为了吸引用户，我们利用了
```
userService
```
。

这个组件就差不多了。

接下来，让我们在

src/app/users/user.model.ts

文件中创建一个模型。每个用户将拥有一个ID，一个名字和一个姓氏：

export class User {
id: number;
first: string;
last: string;
}

没什么复杂的。

现在，让我们继续将在

app/src/users/user.service.ts

文件中定义的

UserService

：

import { Injectable } from '@angular/core';
import { User } from './user.model';

@Injectable()
export class UserService {

constructor() { }

getUsers(): User[] {
return [
{
id: 1,
first: 'John',
last: 'Doe'
},
{
id: 2,
first: 'Margaret',
last: 'Brown'
}
]
}
}

getUsers

方法仅返回带有硬编码数据的用户数组。

现在让我们在

ngFor

的帮助下显示我们的用户。另外，我们将添加一个click事件监听器，并在用户被点击时触发

onSelect

。发生这种情况时，应显示一个用于编辑所选用户的表单（这将在

ngIf

的帮助下

ngIf

）。修改

src/app/users/user.component.html

文件，如下所示：

<div *ngFor="let user of users" (click)="onSelect(user)"
[class.selected]="user === selectedUser">
<p>{{user.last}}, {{user.first}} (ID: {{user.id}})</p>
</div>

<div *ngIf="selectedUser">
<h3>Edit</h3>
<label for="first">First</label>
<input [(ngModel)]="selectedUser.first" placeholder="First name" id="first">

<label for="last">Last</label>
<input [(ngModel)]="selectedUser.last" placeholder="Last name" id="last">
</div>

我们正在为选定的用户分配

.selected

CSS类，因此让我们在

src/app/users/user.component.css

文件中为其添加一些简单的样式：

.selected {
font-weight: bold;
}

最后，我们必须在

src/app/app.module.ts

文件中导入

FormsModule

和

UserService

：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <---
import { UserService } from './users/user.service'; // <---

import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';

FormsModule

应该在

FormsModule

的

imports

部分中

app.module.ts

，而

UserService

则提供给

providers

：

@NgModule({
declarations: [
AppComponent,
UsersComponent
],
imports: [
BrowserModule,
FormsModule // <---
],
providers: [
UserService // <---
],
bootstrap: [AppComponent]
})

而已！我们的示例应用程序已完成，您可以通过运行以下命令来打开它：