调试 HTTP 和异步调用
介绍
在开发应用程序时发现错误是编程的正常部分。我们需要可靠的方法来做到这一点，其中包括浏览器的内置调试器、控制台语句和其他各种第三方工具（如 Augury）。
调试任何应用程序的方法有很多种，但在 Angular 中，我们可以使用工具或内置调试方法，如调试器和控制台语句。在本指南中，我们将研究其中的几种：
- 占卜
- Google Chrome 开发工具
- console.log() 语句
- JavaScript 调试器
- RxJs 可观察对象的 Do 操作符
- 第三方记录器
让我们深入地看一下每一个。
占卜
Augury 是 Google Chrome 和 Mozilla Firefox 浏览器中用于调试和分析 Angular 应用程序的最常用的开发人员工具扩展。Augury 是 Angular 和 Rengle.io 团队的合资企业。这意味着它是一项开源工作，它带有各种调试选项，如下所示。
我们可以在https://augury.rangle.io/查看完整的文档。
Augury 支持几种不同的功能：
- 输入/输出演示
- 依赖注入树/流
- 路线树
- 模块列表
所有这些功能都在 Google Chrome 开发工具中完全可视化，每当我们打开预测标签时，我们都可以看到并测试上述所有选项。
例如，如果我们打开 Augury 选项卡并找到组件树选项卡（如下图所示），我们可以将组件的叶子（如 div 和其他元素）放入组件中。
我们还可以使用 NgModules 选项卡检查应用程序中存在的模块数量，如下图所示。
如上图所示，模块按顺序列出。这些包括：
- AppModule
- 浏览器模块
- AppRouting模块
- 路由器模块
这些是配置到应用程序中的主要模块，但请记住，这些模块可能因项目配置的不同而因应用程序而异。
最后，Augury 最有用的功能之一是它在 Augury 控制台中提供了依赖注入图。为此，我们需要找到名为Component tree的选项卡，并找到最右边名为injection graph 的选项卡，如下所示：
在此注入器图表选项卡中，我们可以看到表示图表流程的符号。在此示例中，根（即应用程序的根）后面是 AppComponent 和路由器出口。
这些是 Augury 的重要特征：路由器树、我们在应用程序中配置的模块和依赖注入图。
使用 Google Chrome 的开发工具
使用 Google Chrome 调试应用程序是最古老的调试方法之一，世界各地的开发人员都在使用这种方法。
Chrome 开发工具使您能够在某些断点处中断；它可能是 JavaScript 文件中任何位置的调试器或自定义断点。
Chrome 开发工具还允许我们在每次抛出异常时停止调试器。
可以使用源选项卡中的暂停按钮和下面的复选框来激活此功能，只有在未捕获异常时才允许暂停调试器。
让我们使用开发工具创建一个调试点。它看起来像这样：
一旦我们打开 Chrome 的开发工具并找到源选项卡并创建一个调试点，每当触发调试点时，断点就会停止在特定的行，我们就可以看到输出，如上图所示。
使用 console.log() 语句
我们可以使用 console.log() 添加不同的条件断点。调试器和 console.log() 语句之间的区别在于，当使用console.log()时，代码不会在任何代码点停止，并且它可能会返回 undefined。这意味着我们不能一直使用 console.log 进行调试。因此，它不是一种特殊的调试技术；它更像是针对不同日志记录级别的调试。
例如，如果我们想检查一个生命周期钩子函数的执行顺序，我们可以把 console.log 语句放到不同的函数中，顺序表示执行的顺序。
应用程序.组件.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testdemo';
ngOnInit() {
console.log('ngOnInit() function');
}
ngOnChanges() {
console.log('ngOnChanges() function');
}
ngDoCheck() {
console.log('ngDoCheck() function');
}
ngAfterContentInit() {
console.log('ngAfterContentInit() function');
}
ngAfterContentChecked() {
console.log('ngAfterContentChecked() function')
}
ngAfterViewInit() {
console.log('ngAfterViewInit() function');
}
ngAfterViewChecked() {
console.log('ngAfterViewChecked() function');
}
ngOnDestroy() {
console.log('ngOnDestory() function');
}
}
正如我们在上面的例子中看到的，每个函数都有钩子函数和 console.log 语句，当我们运行应用程序时，我们可以看到语句列表：
如上例所示，每当我们需要根据任何基于 JavaScript 的表达式或条件检查某些基本值时，我们都可以放置 console.log 语句。
使用 console.log 语句是一种常见的方法，但调试器对于有效调试基于 JavaScript 的代码更为有效。
JavaScript 调试器
debugger 语句是一个广泛使用的语句，在其中我们可以使用独特的关键字debugger。
每当我们在 JavaScript 代码中使用 debugger 关键字并执行它时，如果调试功能可用，则会触发断点。否则，它不会产生任何效果。
我们可以在文件中的任何位置使用简单的调试器关键字，如下所示：
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: HttpClient) { }
// Testing API url
url = "https://jsonplaceholder.typicode.com/todos";
httpData: any;
ngOnInit() {
this.http.get<empDetail[]>(this.url).subscribe(data => {
this.httpData = data;
})
}
}
interface empDetail {
name: string;
email: string;
}
正如您在上面的示例中看到的，我们有一个简单的 GET API 调用，如果我们想要获取从 API 中获取了多少条记录之类的详细信息，那么我们可以将如上所述的调试器点放入下面的代码行中。
ngOnInit() {
this.http.get<empDetail[]>(this.url).subscribe(data => {
// Debugger point
debugger
this.httpData = data;
})
}
除了 Get HTTP 调用之外，我们还有一个名为 debugger 的附加关键字，因此每当我们执行我们的应用程序并且 onInit() 钩子进入操作时，断点就会在那里触发。
执行应用程序并从浏览器打开检查窗口后，我们可以看到断点是从 GET API 调用触发的，并且我们将值放入响应中，如上图所示。
这就是我们如何获取来自不同 API 端点的值并找出和防止错误或缺陷，从而提高应用程序的生产力和可维护性。
对 RxJs Observable 使用 Do 运算符
如果我们将 RxJs 与 Angular 一起使用，则使用do运算符调试 RxJs 可观察对象非常容易，如下所示：
getEmpbyid(id: number): Observable<Employee> {
return this.http.get(`/api/v1/employee/${id}`)
.do(res => console.log("Employee Detail : ", res))
.map(res => res.json().payload)
.do(console.log);
}
在此代码片段中，我们使用了 do 运算符，它允许我们记录响应并找到所需的信息。
同样，我们也可以使用第三方库rxjs-spy进行调试，该库允许我们使用浏览器的控制台 API。我们可以使用内置函数调试 RxJs 调用，下面列出了其中一些函数：
- 展示（）
- 日志（）
- 撤消()
- 让（）
- 暂停（）
- 步（）
- 跳过（）
我们可以使用它们进行调试、日志记录、修改可观察对象、暂停标记的可观察对象、发布暂停通知等等。
因此，这种方法在使用 RxJs 时非常有用，RxJs 是一种特定于 Angular 的 Redux 状态管理机制。
第三方记录器
我们已经研究了几种调试应用程序的方法，但除此之外，我们还可以使用一些第三方包来调试应用程序，我们可以在我们的应用程序中安装这些包并根据我们的需求使用它们。
以下是一些用于调试的第三方包：
- 调试
- TS 调试
- Chrome 调试器（扩展）
- Ngx-记录器
- Angular2 记录器
概括
在本指南中，我们学习了几种不同的调试技术，包括本机调试器、代码编辑器的扩展和其他第三方包。
我希望现在您对调试 Angular 应用程序有了更好的理解。请查看我的其他指南，并继续关注更多内容。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~