快捷導(dǎo)航

Angular2使用Augury來(lái)調(diào)試Angular2程序

更新時(shí)間：2017年05月21日 11:18:48 作者：yitalalww

這篇文章主要介紹了Angular2使用Augury來(lái)調(diào)試Angular2程序,非常具有實(shí)用價(jià)值，需要的朋友可以參考下

Augury-Angular專(zhuān)用的chrome 調(diào)試插件

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

Augury安裝

https://augury.angular.io/

內(nèi)容和步驟都在這里，非常簡(jiǎn)單，就是上chrome 應(yīng)用商城搜索augury，安裝一下就可以了，就是一個(gè)chrome插件。

Augury特性

1 用augury查看component結(jié)構(gòu)

我的angular2應(yīng)用中，結(jié)構(gòu)非常簡(jiǎn)單，就一個(gè)主要的AppComponent和一個(gè)dashboardComponent

運(yùn)行應(yīng)用，打開(kāi)瀏覽器查看頁(yè)面，在開(kāi)發(fā)者工具中可以看到，ComponentTree，這里可以非常清晰的看出appComponent的結(jié)構(gòu)圖，hover到component上面時(shí)，頁(yè)面也會(huì)顯示相應(yīng)的位置；

2 查看單個(gè)Component的具體屬性和方法

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

3 可視化顯示component關(guān)系

我的codemirrorComponent是引用進(jìn)來(lái)的component，正是在dashboard下引用，路徑正是圖中顯示的那樣。

4 查看router結(jié)構(gòu)

我的例子router tree不能顯示，不知原因，拿augury的demo來(lái)說(shuō)明下，

結(jié)構(gòu)真是一目了然。

這些router結(jié)構(gòu)，component結(jié)構(gòu)可以幫助看看應(yīng)用的結(jié)構(gòu)是否存在問(wèn)題。components中的具體方法，屬性，用來(lái)調(diào)試具體內(nèi)容的邏輯,有時(shí)候想換設(shè)一個(gè)值調(diào)下看看，可以直接在properties中改掉。本文只是拋磚引玉，具體內(nèi)容還需自行研究。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。