Angularjs batarang是針對(duì)谷歌瀏覽器用戶打造的一款增強(qiáng)插件,該插件主要方便開(kāi)發(fā)者進(jìn)行腳本的編譯和調(diào)試操作,可以有效地加速開(kāi)發(fā)者的進(jìn)程,是您調(diào)試AngularJS程序的好幫手,安裝后就會(huì)多個(gè)batarang的選項(xiàng),可以查看scope的信息或者對(duì)應(yīng)的模型信息,同時(shí)還可以查看應(yīng)用的性能。
使用方法
1、AngularJS Batarang插件離線安裝的方法參照一下方法:老版本chrome瀏覽器,首先在標(biāo)簽頁(yè)輸入【chrome://extensions/】進(jìn)入chrome擴(kuò)展程序,解壓你在本站下載的插件,并拖入擴(kuò)展程序頁(yè)即可。
2、最新版本的chrome瀏覽器直接拖放安裝時(shí)會(huì)出現(xiàn)“程序包無(wú)效CRX-HEADER-INVALID”的報(bào)錯(cuò)信息,參照:Chrome插件安裝時(shí)出現(xiàn)"CRX-HEADER-INVALID"解決方法,安裝好后即可使用。
3、安裝完畢后圖標(biāo)會(huì)出現(xiàn)在插件欄里。
4、在chrome瀏覽器中打開(kāi)一個(gè)Angular應(yīng)用,并打開(kāi)控制臺(tái),如下圖,會(huì)發(fā)現(xiàn)控制臺(tái)中多了一個(gè)AngularJS的頁(yè)面,勾選“Enable”,該控件就可以使用了。
5、點(diǎn)開(kāi)Models,如下圖,左側(cè)是該應(yīng)用下的所有Scope的信息,右側(cè)是Scope對(duì)應(yīng)的模型信息。點(diǎn)擊某個(gè)作用域,右側(cè)相應(yīng)的會(huì)顯示出該作用域中的所有模型信息。 點(diǎn)擊Scope前的”<”,會(huì)跳到Elements中該作用域所在的DOM標(biāo)簽上。
6、Performace展示的是該應(yīng)用的性能,左側(cè)顯示的是監(jiān)控樹(shù),點(diǎn)擊樹(shù)的節(jié)點(diǎn),跳轉(zhuǎn)至相應(yīng)的element元素上。右側(cè)顯示的是監(jiān)控表達(dá)式的性能,這個(gè)頁(yè)面能幫助我們進(jìn)行性能優(yōu)化。
7、Dependenices展示的指令和服務(wù)之間的依賴(lài)關(guān)系,選定某個(gè)指令,可以看到其依賴(lài)的服務(wù)。通過(guò)圖表把服務(wù)之間的依賴(lài)關(guān)系可視化,紅線代表依賴(lài)。
8、最后是options頁(yè)面。有三個(gè)選項(xiàng):”show applications,” “show scopes,” 和 “show bindings.”。每個(gè)選項(xiàng)勾選時(shí),在debugger時(shí),相應(yīng)的內(nèi)容會(huì)在頁(yè)面高亮。
9、如有任何問(wèn)題,請(qǐng)查看help。
10、在Element標(biāo)簽中選定某個(gè)標(biāo)簽時(shí),Element頁(yè)面的右側(cè)的內(nèi)容,會(huì)多一個(gè)AngularJS Properties頁(yè)面,該頁(yè)面顯示的是選定的html內(nèi)容的作用域的屬性,該功能對(duì)于對(duì)Angular Scope的理解非常有用。如果不是很理解Angular Scope,可以多用一個(gè)這個(gè)功能。