AngularJS Batarang - Angular調試插件

AngularJS Batarang插件背景簡介

如果你如今從事前端開發，大行其道的MVVM框架，決計是繞不過去的存在。那么以下是三大流行框架 Devtools，如需自取。Vue.js devtools、AngularJS BatarangReact 、Developer Tools。本文主要介紹的就是AngularJS Batarang

AngularJS Batarang插件簡介

angularjs batarang是針對谷歌瀏覽器用戶打造的一款增強插件，該插件主要方便開發者進行腳本的編譯和調試操作，可以有效地加速開發者的進程，是您調試AngularJS程序的好幫手，安裝后就會多個batarang的選項，可以查看scope的信息或者對應的模型信息，同時還可以查看應用的性能。

AngularJS Batarang插件使用方法

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，可以多用一個這個功能。