26、应用调试指南-优快云博客

本文链接：https://blog.youkuaiyun.com/perl8/article/details/155116146

应用调试指南

在开发应用程序的过程中，调试是一项至关重要的工作。它能帮助我们找出代码中的错误，确保应用程序的正常运行。本文将详细介绍如何调试应用程序，特别是 Express 和 Angular 部分。

调试 Express 应用

要使用新的调试脚本，你需要按照以下步骤操作：
1. 导航到应用程序的根文件夹。
2. 在命令行工具中输入以下命令：

$ npm run debug

执行该命令后，应用程序将以调试模式运行，并等待你连接 Chrome 开发者工具调试器。命令行工具的输出应该类似于以下内容：

Running in Debug mode

此时，调试脚本会提示你使用兼容的浏览器访问 chrome-devtools://… 来开始调试应用程序。在 Google Chrome 中打开这个 URL，你将看到一个界面，左侧面板显示项目文件列表，中间面板是文件内容查看器，右侧面板是调试仪表盘。这表明调试脚本运行正常，并且能够识别你的 Express 项目。你可以通过设置断点并测试应用程序的行为来开始调试项目。

需要注意的是，Node 检查功能仅适用于使用 Blink 引擎的浏览器，如 Google Chrome 或 Opera。此外，该功能仍处于实验阶段，建议你关注官方 Node.js 文档以获取最新信息。

调试 Angular 应用

调试 MEAN 应用中的 Angular 部分通常在浏览器中进行，但调试 Angular 的内部操作可能会更具挑战性。为了解决这个问题，Google 和 Rangle.io 的联合团队开发了一个名为 Angular Augury 的 Chrome 扩展。它为 Chrome 开发者工具添加了一个新的标签页，让你可以调试 Angular 应用的不同方面。

安装 Angular Augury

安装 Angular Augury 非常简单，你只需访问 Chrome 网上应用店：
https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd
然后安装该 Chrome 扩展。需要注意的是，Angular Augury 仅适用于 Google Chrome 浏览器。

使用 Angular Augury

安装完成后，按照以下步骤使用 Angular Augury：
1. 使用 Chrome 浏览器导航到你的应用程序 URL。
2. 打开 Chrome 开发者工具面板，你会看到一个名为 Angular 的标签页。
3. 点击该标签页，将打开一个类似于以下截图的面板。

组件树

Angular 应用是由组件树构建而成的。Augury 允许我们以层次结构的方式检查这些组件。例如，当我们检查文章模块中的 ViewComponent 时，由于组件路由器基于简单的层次结构，我们还可以看到 AppComponent 和 ArticlesComponent 。在右侧有两个标签页： Properties 和 Injector Graph 。
- 在 Properties 标签页中，你可以找到组件的状态，包括文章和用户属性以及组件依赖项。这些状态是可编辑的，你可以更改组件状态并查看其对 ViewComponent 渲染的影响。
- 当我们检查 CreateComponent 时，还可以看到 Augury 如何处理表单。你可以检查表单状态并了解其内部状态。如果你编辑表单输入的值，右侧面板会实时更新其状态。
- 点击 Injector Graph 选项，你可以看到 Angular 的注入器是如何工作的，以及当前组件注入的提供者。例如， Router 和 ArticlesService 提供者被注入到 CreateComponent 中。在大型应用程序中，这将帮助你更好地理解项目状态。

以下是组件树的操作流程：

graph LR
    A[打开 Chrome 开发者工具] --> B[点击 Angular 标签页]
    B --> C[选择要检查的组件]
    C --> D[查看 Properties 标签页]
    C --> E[查看 Injector Graph 标签页]

路由树

要探索 Angular 应用的路由，你可以点击 Router Tree 标签页。在此之前，你需要在应用程序组件中注入路由提供者，示例代码如下：

import { Component } from '@angular/core';
import { AuthenticationService } from './authentication/authentication.service';
import { Router } from '@angular/router';

@Component({
  selector: 'mean-app',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {
  constructor(private _authenticationService: AuthenticationService,
              private router: Router) {}
}

完成上述操作后，你将看到一个面板，通过它可以以易于理解的图形方式了解应用程序的路由方案。

以下是路由树的操作流程：

graph LR
    A[在应用组件中注入路由提供者] --> B[打开 Chrome 开发者工具]
    B --> C[点击 Angular 标签页]
    C --> D[点击 Router Tree 标签页]
    D --> E[查看路由方案图形]

Angular Augury 是一个简单而强大的工具。正确使用它可以节省你大量的时间，避免无休止地查找和使用控制台日志。确保你理解每个标签页的功能，并尝试自己探索应用程序。

通过本文的介绍，你学会了如何自动化 MEAN 应用程序的开发，以及如何调试应用程序的 Express 和 Angular 部分。希望这些技巧能帮助你更高效地开发和调试应用程序。

应用调试指南（续）

调试操作总结

为了更清晰地展示调试 Express 和 Angular 应用的操作步骤，我们将其总结在以下表格中：
| 调试对象 | 操作步骤 | 注意事项 |
| ---- | ---- | ---- |
| Express 应用 | 1. 导航到应用程序根文件夹
2. 在命令行工具输入 npm run debug
3. 打开 Chrome 浏览器，访问 chrome-devtools://… 开始调试 | 仅适用于使用 Blink 引擎的浏览器，如 Chrome 或 Opera，该功能处于实验阶段，需关注官方 Node.js 文档 |
| Angular 应用（Angular Augury） | 1. 访问 https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd 安装扩展
2. 使用 Chrome 导航到应用程序 URL
3. 打开 Chrome 开发者工具，点击 Angular 标签页 | 仅适用于 Google Chrome 浏览器 |

调试技巧拓展

在调试过程中，除了上述介绍的基本方法，还有一些额外的技巧可以帮助我们更高效地定位和解决问题。

断点调试技巧

在使用 V8 调试 Express 代码时，合理设置断点可以大大提高调试效率。以下是一些设置断点的建议：
- 入口点断点 ：在应用程序的入口文件（如 app.js ）的开头设置断点，这样可以在应用启动时就开始调试，观察初始化过程中的变量和状态。
- 关键逻辑断点 ：在关键的业务逻辑代码处设置断点，例如数据处理、用户认证等部分。这样可以详细检查这些逻辑的执行过程，确保其正确性。
- 异常处理断点 ：在异常处理代码块中设置断点，当应用程序抛出异常时，能够快速定位到问题所在。

日志调试技巧

在调试 Angular 应用时，除了使用 Angular Augury，合理使用日志输出也是一种有效的调试方法。可以在组件的关键位置添加 console.log() 语句，输出变量的值和执行状态。例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>'
})
export class ExampleComponent {
  constructor() {
    const exampleVariable = 'This is an example';
    console.log('Example variable value:', exampleVariable);
  }
}

通过查看浏览器控制台的日志输出，可以了解组件的执行过程和变量的变化情况。

调试常见问题及解决方案

在调试过程中，可能会遇到一些常见的问题，以下是一些问题及对应的解决方案：

Express 调试问题

无法启动调试模式
- 问题描述 ：执行 npm run debug 命令后，应用程序没有进入调试模式，或者 Chrome 开发者工具无法连接到调试会话。
- 解决方案 ：检查 package.json 文件中的 debug 脚本配置是否正确，确保 Node.js 版本支持调试功能，并且 Chrome 浏览器版本兼容。
调试信息不准确
- 问题描述 ：在 Chrome 开发者工具中看到的变量值和代码执行状态与实际情况不符。
- 解决方案 ：清除浏览器缓存和调试会话，重新启动调试过程。确保代码没有被缓存，并且调试工具与应用程序的版本一致。

Angular Augury 调试问题

Augury 标签页不显示
- 问题描述 ：安装 Angular Augury 扩展后，在 Chrome 开发者工具中看不到 Angular 标签页。
- 解决方案 ：确保应用程序是 Angular 应用，并且 Angular 版本与 Augury 扩展兼容。尝试重新安装 Augury 扩展，或者在 Chrome 浏览器的扩展管理页面中启用 Augury。
路由树显示异常
- 问题描述 ：点击 Router Tree 标签页后，没有显示正确的路由方案图形，或者出现空白页面。
- 解决方案 ：检查应用程序组件中是否正确注入了路由提供者，确保路由配置没有错误。可以在控制台查看是否有相关的错误信息，根据错误提示进行修复。

总结

调试是应用程序开发过程中不可或缺的环节。通过掌握调试 Express 和 Angular 应用的方法，如使用 V8 调试 Express 代码和 Angular Augury 调试 Angular 内部操作，我们可以更高效地定位和解决代码中的问题。同时，合理运用断点调试和日志调试技巧，以及了解常见问题的解决方案，能够进一步提升调试效率。

在实际开发中，建议开发者不断实践和总结调试经验，根据不同的应用场景选择合适的调试方法。希望本文介绍的内容能够帮助开发者更好地进行应用程序的调试工作，提高开发质量和效率。

以下是一个总结调试流程的 mermaid 流程图：

graph LR
    A[开始调试] --> B{选择调试对象}
    B --> |Express 应用| C[执行 npm run debug 命令]
    C --> D[打开 Chrome 开发者工具连接调试会话]
    D --> E[设置断点调试]
    B --> |Angular 应用| F[安装 Angular Augury 扩展]
    F --> G[打开 Chrome 开发者工具点击 Angular 标签页]
    G --> H[使用组件树和路由树调试]
    E --> I[解决问题]
    H --> I
    I --> J[结束调试]

希望开发者们在调试过程中能够顺利解决遇到的问题，打造出高质量的应用程序。