Augury-Angular專用的chrome 調試插件

如題，在的2016-12-8谷歌開發者大會上，angular2的leader來給我們演示了angular2的特性，對于已經入門的同學們，已經沒有太多新鮮內容，唯有一個內容讓我為之一震，就是Augury（現在和VUE對比起來，確實可以看出有谷歌支持下angular2會更活躍，我個人認為2年后恐怕VUE無法與之抗衡），跟Angular-CLI一樣，還處于beta階段，也還有很多問題，但是有些地方已經非常方便開發和調試了，這里看到國內竟然沒有一篇文章介紹Augury,我就先拋磚引玉一下介紹下，讓大家嘗嘗鮮！

Augury安裝

https://augury.angular.io/

內容和步驟都在這里，非常簡單，就是上chrome 應用商城搜索augury，安裝一下就可以了，就是一個chrome插件。

Augury特性

1 用augury查看component結構

我的angular2應用中，結構非常簡單，就一個主要的AppComponent和一個dashboardComponent

運行應用，打開瀏覽器查看頁面，在開發者工具中可以看到，ComponentTree，這里可以非常清晰的看出appComponent的結構圖，hover到component上面時，頁面也會顯示相應的位置；

2 查看單個Component的具體屬性和方法

點擊properties，可以看到具體的component方法和屬性，我這里用了一個codemirror的angular2組件（angular2真心好用，連這個組件都有了，不知道vue有沒有）；可以看出我上面選擇了sql模式，這里我的codemirror的mode屬性設置的是sql與之呼應；

3 可視化顯示component關系

我的codemirrorComponent是引用進來的component，正是在dashboard下引用，路徑正是圖中顯示的那樣。

4 查看router結構

我的例子router tree不能顯示，不知原因，拿augury的demo來說明下，

結構真是一目了然，真是太牛逼了。

這些router結構，component結構可以幫助看看應用的結構是否存在問題。components中的具體方法，屬性，用來調試具體內容的邏輯,有時候想換設一個值調下看看，可以直接在properties中改掉。本文只是拋磚引玉，具體內容還需自行研究。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。