angular调试_使用Angular Augury调试代码
赞
踩
angular调试
Augury是一个开放源代码工具， 允许开发人员分析和调试 Angular 2和4应用程序。
现代的网络浏览器提供了开发人员控制台来检查页面上的各种元素，这在尝试调试标记，样式和脚本时非常方便。 但是，此控制台不足以调试通常具有许多组件，事件，属性和单独的路由系统的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]
- })
而已！ 我们的示例应用程序已完成，您可以通过运行以下命令来打开它：
ng serve --open组件视图
好吧，现在让我们来看看Augury必须提供给我们的东西。 打开Chrome浏览器，然后转到http://localhost:4200 。 应该显示用户列表。 按Ctrl + Shift + I或Cmd + Opt + I ，切换到“ Augury”选项卡，然后按左窗格中“ 组件树”下的AppComponent ：
这里有两个窗格：
- 在左侧，您可以看到组件树 ，其中包含正确嵌套的应用程序组件列表。
- 右边是所选组件的“ 属性”窗格。 我们的
AppComponent只有一个属性title，该属性title显示在其值旁边（用箭头注释）。
“ 属性”窗格的有趣之处在于，您可以根据需要更改值并立即观察更改。 例如，尝试更改title ：
此外，组件名称旁边还有一个“ 查看源代码”链接。 按下它将显示所选组件的源代码，您可以在其中轻松插入断点以在任意点处停止执行代码：
现在让我们回到组件树，然后选择UsersComponent 。 在“ 属性”选项卡中，我们将看到一组用户（下面的屏幕快照中的点1）以及“ 依赖关系”部分中的UserService列表2）：
接下来，让我们尝试查看UsersComponent的源代码。 当相应的选项卡打开时，您可以在第16行插入断点，例如this.selectedUser = user; 。 要插入断点，只需单击行号。 接下来，尝试选择一个用户，您将看到以下内容：
因此，代码执行被暂停，当前选择的用户显示在该橙色框中。 调试完此行后，可以按“ 继续执行脚本”按钮：
该程序将继续执行，并在下一个断点处停止或完成其工作。 如果您怀疑由于某些特定方法对数据的处理不正确而导致应用程序行为异常，则可以使用断点。 您可能会根据需要拥有任意数量的断点，这使您可以逐步探索脚本并了解各个步骤中数据的处理方式。
形式
请注意，选择用户后，将立即添加selectedUser属性。 另外，您将看到两个inputs添加到UsersComponent ：
如果选择这些输入之一，我们将看到有关此控件的一些非常详细的信息-特别是，它也关联什么模型。 如果更改输入的值，则模型也将被更新：
依赖注入
您还记得，我们已经将UserService注入到UsersComponent ，对吗？ 通过选择UsersComponent并打开“ Injector Graph ”，可以很容易地确认这一点：
因此，在这里我们可以看到“组件层次结构”和“注入器图”本身。 此图说明了依赖关系树：
-
root是我们NgModule在定义app.module.ts文件 - 接下来，有一个
AppComponent - 最后，还有
UsersComponent本身。
另外请注意，在这里我们可以看到UserService连接到UsersComponent一条红线。 这确认服务肯定已注入到组件中。 您也可以将鼠标指针悬停在UserService节点上，以在选项卡底部查看更多详细信息：
依赖注入可以帮助您确保正确连接了所有依赖，因为许多错误的出现仅仅是因为您忘记了导入某些模块。
Ng模块
还可以查看应用程序中使用的所有模块的完整列表，以及有关提供程序，导出和其他内容的信息。 就像打开NgModules标签一样简单：
不幸的是，该选项卡不是交互式的，因此您无法选择模块来查看有关它的更多详细信息。 不过，它确实可以派上用场。
路线
最后一项Augury功能是检查应用程序路由系统的能力。 演示应用程序中没有任何路线，但这是来自官方文档的图像，很好地说明了此功能：
我们可以轻松查看所有应用程序的路由。 即使路由是延迟加载，当相应的路由出现时，该架构也会自动更新。 多么酷啊？
结论
在本文中，我们研究了Angular 2+应用程序的Augury探查器和调试器。 我们已经了解了如何安装和启动此工具，并讨论了其所有主要功能，包括组件树，注入图，断点和路由调试。
如您所见，此工具非常简单，但功能强大，因此绝对是每个Angular开发人员都应在其工具箱中使用的工具！ 在为客户端开发时，您尝试使用哪些调试器？ 您喜欢Augury的功能吗？ 与往常一样，我感谢您与我在一起并进行了愉快的调试。
angular调试
