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