Angular2使用Augury来调试Angular2程序

Angular开发者的福音：使用Augury调试Angular2程序

在最近的谷歌开发者大会上，Angular2的领导者向我们展示了这一框架的新特性。对于已经熟悉Angular的开发者来说，大部分的内容可能并不新鲜，但有一个工具让我眼前一亮，那就是Augury。

Augury是一个专为Angular开发的Chrome调试插件，对于开发和调试Angular程序来说，它是一个非常实用的工具。虽然在Vue和Angular的竞争下，Vue有Vue Devtools这样的插件，但Augury以其独特的特性，仍在Angular社区中占据了重要地位。

安装Augury非常简单，只需在Chrome应用商城中搜索augury并安装即可。接下来，让我们深入了解Augury的一些主要特性。

一、查看Component结构

在Angular2应用中，我们可以通过Augury轻松查看应用的组件结构。例如，在我的一个简单的应用中，只有一个主要的AppComponent和一个dashboardComponent。在Chrome的开发者工具中，通过Augury的ComponentTree，我可以清晰地看到appComponent的结构图，当我将鼠标悬停在某个组件上时，页面也会显示该组件在结构中的位置。

二、查看单个Component的具体属性和方法

通过Augury，我可以查看单个组件的详细属性和方法。例如，如果我使用了一个angular2的codemirror组件，我可以在Augury中查看这个组件的属性和方法。在我给出的例子中，我选择了一个sql模式的codemirror组件，可以看到其mode属性设置为sql。

三、可视化显示Component关系

Augury还可以可视化显示组件之间的关系。例如，我的codemirrorComponent是从外部引入的组件，在dashboard中引用，通过Augury，我可以清晰地看到它们之间的路径关系。

四、查看router结构

Augury还可以帮助我们查看应用的路由结构。通过直观的树形结构，我们可以一目了然地看到整个应用的路由布局。这对于检查应用的结构是否有问题非常有帮助。我们还可以在Augury中直接修改某些值进行调试，比如组件的属性和方法。

Augury是一个强大的工具，它可以帮助我们更好地理解和调试Angular2应用。虽然它目前还处于beta阶段，存在一些已知的问题，但它的实用性和便捷性已经让许多开发者为之倾倒。对于Vue开发者来说，也许现在还没有类似的工具，但Angular2在谷歌的支持下正在蓬勃发展。我预测两年后，Vue可能无法与之匹敌。

以上就是本文的全部内容，希望对大家的学习有所帮助。也希望大家能多多支持狼蚁SEO，共同学习进步。