前言
当进行前端开发时，我们通常会使用 Chrome 开发者工具来进行调试。然而，Chrome 开发者工具的功能非常多，我们并不一定都能顺手使用，尤其是当我们需要进行 Angular 应用程序的调试时。
为了方便 Angular 开发者进行调试，奥斯汀团队开发了一个名为 Augury 的 Chrome 扩展程序。它能够提供 Angular 应用程序在运行时的诊断信息，以及组件树和模块图表等有用信息。
如何使用 npm 包 augury-extension 来实现 Augury 扩展程序的集成呢？让我们来一步一步地学习。
步骤一：安装 npm 包 augury-extension
我们需要使用 npm 包管理器来安装 augury-extension。打开终端并输入以下命令：
npm i --save-dev augury-extension
安装完成后，我们需要在 package.json 文件中添加以下代码以添加 augury-extension 依赖关系。
"devDependencies": { "augury-extension": "^2.2.2" },
步骤二：引入 augury-extension
在项目中引入 augury 扩展程序：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- ------------------- ----------- ------------- - ------------ -- -------- - -------------- ---------------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
在这个例子中，我们引入了 Augury 扩展程序的 AuguryModule，并将其添加到了我们的应用程序中。
步骤三：运行 augury-extension
现在，我们已经可以运行我们的应用程序并使用 Augury 扩展程序进行调试了。打开 Chrome 浏览器并在地址栏中输入 chrome://extensions。启用开发者模式并选择“加载已解压的扩展程序”。
然后，选择你的项目中 node_modules 目录下的 augury-extension 目录，并点击“选择文件夹”。
现在，在 Chrome 浏览器中打开你的 Angular 应用程序，右键单击浏览器空白区域，选择“检查”。在“Elements”面板中，你应该能看到一个新的选项卡，“Augury”，这就是 augury-extension 的界面，你可以使用它来调试你的 Angular 应用程序了。
分享一个使用示例
我们可以通过一个简单的 Angular 应用程序来演示 augury-extension 的使用过程。我们需要定义两个组件，一个是父组件，另一个是子组件。
首先，创建 parent.component.ts 文件：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------- --------- - ------ ---- ------- ----------------------- - -- ------ ----- --------------- - ---- - -- -- -------- -展开代码
然后，创建 child.component.ts 文件：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------ --------- - ------ ---- ------- - -- ------ ----- -------------- - ---- - -- -- ------- -展开代码
在定义好组件之后，我们需要将它们添加到 app.module.ts 中：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------- ------ - ------------ - ---- ------------------ ------ - --------------- - ---- --------------------- ------ - -------------- - ---- -------------------- ----------- ------------- - ------------- ---------------- -------------- -- -------- - -------------- ---------------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
最后，在 app.component.ts 中模板中添加 parent 组件：
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<app-parent></app-parent>` }) export class AppComponent { }
现在，我们已经准备好了，可以开始调试 Angular 应用程序。在浏览器控制台中运行 npm start。如果你已经在 Chrome 中添加了 augury-extension，你现在应该可以发现“Augury”选项卡，并看到组件树和模块图表了。
总结
在本文中，我们了解了如何使用 npm 包 augury-extension 来调试 Angular 应用程序。我们一步一步地学习了如何通过 npm 安装 augury-extension，如何在项目中引入 augury 扩展程序，以及如何运行 augury-extension。我们还分享了一个使用示例，以帮助你更好地了解如何使用 augury-extension。
通过这种方式，我们可以更加灵活地调试我们的 Angular 应用程序，并更好地理解它们的内部工作机制。这将有助于我们更好地设计和构建 Angular 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bea81e8991b448d990f
