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

AngularJS Batarang插件使用方法

1. AngularJS Batarang插件離線安裝的方法參照一下方法：老版本chrome瀏覽器，首先在標(biāo)簽頁輸入【chrome://extensions/】進(jìn)入chrome擴(kuò)展程序，解壓你在本站下載的插件，并拖入擴(kuò)展程序頁即可。

2.最新版本的chrome瀏覽器直接拖放安裝時(shí)會出現(xiàn)“程序包無效CRX-HEADER-INVALID”的報(bào)錯(cuò)信息，請百度參照：Chrome插件安裝時(shí)出現(xiàn)"CRX-HEADER-INVALID"解決方法，安裝好后即可使用。

3.安裝完畢后圖標(biāo)會出現(xiàn)在插件欄里。

4.在chrome瀏覽器中打開一個(gè)Angular應(yīng)用，并打開控制臺，如下圖，會發(fā)現(xiàn)控制臺中多了一個(gè)AngularJS的頁面，勾選“Enable”，該控件就可以使用了。

5.點(diǎn)開Models，如下圖，左側(cè)是該應(yīng)用下的所有Scope的信息，右側(cè)是Scope對應(yīng)的模型信息。點(diǎn)擊某個(gè)作用域，右側(cè)相應(yīng)的會顯示出該作用域中的所有模型信息。?點(diǎn)擊Scope前的”<”，會跳到Elements中該作用域所在的DOM標(biāo)簽上。

6.Performace展示的是該應(yīng)用的性能，左側(cè)顯示的是監(jiān)控樹，點(diǎn)擊樹的節(jié)點(diǎn)，跳轉(zhuǎn)至相應(yīng)的element元素上。右側(cè)顯示的是監(jiān)控表達(dá)式的性能，這個(gè)頁面能幫助我們進(jìn)行性能優(yōu)化。

7.Dependenices展示的指令和服務(wù)之間的依賴關(guān)系，選定某個(gè)指令，可以看到其依賴的服務(wù)。通過圖表把服務(wù)之間的依賴關(guān)系可視化，紅線代表依賴

8.最后是options頁面。有三個(gè)選項(xiàng)：”show applications,” “show scopes,” 和 “show bindings.”。每個(gè)選項(xiàng)勾選時(shí)，在debugger時(shí)，相應(yīng)的內(nèi)容會在頁面高亮。

9.如有任何問題，請查看help

10.在Element標(biāo)簽中選定某個(gè)標(biāo)簽時(shí)，Element頁面的右側(cè)的內(nèi)容，會多一個(gè)AngularJS Properties頁面，該頁面顯示的是選定的html內(nèi)容的作用域的屬性，該功能對于對Angular Scope的理解非常有用。如果不是很理解Angular Scope，可以多用一個(gè)這個(gè)功能。