在 Angular 开发中，调试是一个非常重要的环节。好的调试工具可以提升开发效率，帮助我们更快地定位和解决问题。其中，Augury 就是一款非常优秀的调试工具，它可以帮助我们更好地理解和调试 Angular 应用程序。本文将介绍 Augury 的使用方法及其在 Angular 开发中的作用。
什么是 Augury
Augury 是一款免费的开源调试工具，它可以用来分析和调试 Angular 应用程序。Augury 是一个插件，可以直接在浏览器的开发者工具中使用。它支持查看应用程序的组件树、路由、服务提供商、依赖注入树等信息，可以通过 Augury 来查看组件的属性、方法、事件等，同时还可以检测性能问题和内存泄漏等问题。
Augury 的安装与使用
安装 Augury 非常简单，只需要在浏览器的扩展程序商店中搜索“Augury”，选择对应的扩展程序，点击安装即可。目前，Augury 支持 Chrome 和 Firefox 浏览器。安装完成后，在 Chrome 浏览器的开发者工具中可以看到一个新的选项卡“Augury”。
使用 Augury 首先需要在 Angular 应用程序中引入该插件。在 Angular 中可以通过在 AppModule 中导入 BrowserModule 模块来启用 Augury。
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - ------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
在安装和启用 Augury 后，我们就可以在开发者工具中看到 Augury 的选项卡了。点击 Augury 选项卡，我们可以看到一个界面，界面中分为三个主要的部分：组件树、属性面板和事件面板。其中，组件树用来显示应用程序中的组件树结构，属性面板用来显示组件的属性信息，事件面板用来显示组件的事件信息。
Augury 的作用
查看组件树
在开发过程中，我们可能需要查看应用程序的组件树结构，以帮助我们更好地了解组件之间的关系、依赖等。通过 Augury，我们可以很方便地查看应用程序的组件树结构。
在组件树中，我们可以看到应用程序中的所有组件，组件之间的关系和层级结构，还可以看到组件之间的输入输出关系和依赖注入信息。
查看组件属性和事件
在开发过程中，我们还需要查看组件的属性和事件，以便更好地了解组件的功能和使用方法。通过 Augury，我们可以很方便地查看组件的属性和事件。
选择组件后，我们可以在属性面板中查看该组件的所有属性及其值。如果属性值是一个对象，还可以展开对象查看其属性值。
选择组件后，我们可以在事件面板中查看该组件的所有事件。事件面板中展示了该组件可以触发的所有事件及其处理函数。
查看路由
在 Angular 应用程序中，路由是一个非常重要的功能。通过路由，我们可以实现浏览器端的页面跳转和页面刷新等功能。通过 Augury，我们可以查看应用程序的路由信息。
在路由中，我们可以看到当前活动路由及其子路由，还可以看到路由的参数和其他信息。
检测性能问题
在应用程序开发过程中，性能问题是一个非常重要的问题。通过 Augury，我们可以检测应用程序的性能问题，如查看组件的变更检测、DOM 渲染、网络请求等情况。
在性能面板中，我们可以看到应用程序中的性能信息。通过性能面板，我们可以了解应用程序的性能瓶颈，以便更好地优化应用程序的性能。
Augury 的学习和指导意义
Augury 是一款非常优秀的调试工具，可以帮助我们更好地理解和调试 Angular 应用程序。通过使用 Augury，我们可以更加深入地了解 Angular 应用程序的工作机制和运行方式，帮助我们更好地定位和解决问题。同时，使用 Augury 也可以帮助我们提升开发效率，更加方便地进行开发和调试。因此，学习和使用 Augury 对于 Angular 应用程序开发者来说是非常有意义的。
示例代码
下面是一个简单的 Angular 应用程序，通过使用 Augury 查看该应用程序的组件树、属性和事件信息。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ----- ------ ----- ------- ------- ------------------------- ----------- ------ -- -- ------ ----- ------------ - ----- - ------- -------- --------- - ------------------- ---------- - -展开代码
打开该应用程序，并在浏览器的开发者工具中选择 Augury 选项卡，可以看到如下图所示的 Augury 界面。
从图中可以看到，该应用程序只有一个组件 AppComponent，组件中包含一个标题和一个按钮。在属性面板中可以看到该组件的属性 title 和点击事件 onClick；在事件面板中可以看到该组件触发的 click 事件及其处理函数。通过 Augury，我们可以很方便地查看该应用程序的组件树和组件的属性和事件信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c83b1ce46428fe9ee7ee6b
