安装augury调试angular应用

augury官网

https://augury.angular.io/

augury安装

1. 通过谷歌应用商店安装，在商店中搜索augury，点击install即可，参考augury官网

2. 很多小伙伴因为种种原因无法登陆谷歌应用商店，可以参考以下地址下载和安装crx类型扩展工具（度娘总是会提供给你很多办法）
   https://jingyan.baidu.com/article/e4511cf35c2df92b845eafb3.html

3. github
   登陆github，搜索augury，点击进入项目，选中release，下载其中的crx文件

使用augury

使用augury可以查看angular应用的组件树，组件属性，DI关系，路由树以及每个NgModule包含的内容等等。

谷歌浏览器F12打开调试工具，点击augury，可以看到有Component Tree，Router Tree，NgModules

Component Tree

浏览器默认打开Component Tree，它展示了angular应用程序从根组件AppComponent开始的组件树，组件树展示了组件之间的层次关系。

选中某个组件，augury会在"Properties"选项卡中显示该组件的附加信息

• view source 点击可以跳转到组件对应的ts/js代码处
• Change Detection 组件检测策略
• instance Providers 只有在组件中注入服务时才会出现，在NgModule中注入不会出现
• state 组件的属性
• Dependencies 组件的依赖关系

你可以在state里面查看组件各属性的值是否正确，也可以通过augury修改属性值查看页面是否如你期望的那样，比如：在业务场景中有些页面需要根据某个属性值true false来判断是否显示时，通过state修改属性值即可看到效果，不需要去修改代码或对接后端等复杂操作，使用起来十分方便。

有时候在组件中我们会通过某个属性值的切换调用不同的方法，这种情况下无法在state中通过修改对应的属性值生效。

"Properties"选项卡旁边是"Injector Graph"，单击它将会显示组件和服务的层次关系。

Router Tree

路由结构十分清晰，懒加载的路由以(lazy)标识，加载后才能查看

NgModules

展示了你应用中每个模块的导入，导出，声明以及DI等等

总结

通过augury的特性可以帮助我们更方便的查看angular应用的结构，调试angular代码，更多详细内容请参考augury官网