如今從事前端開發(fā)，大行其道的MVVM框架，決計是繞不過去的存在。那麼以下是三大流行框架 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瀏覽器直接拖曳安裝時會出現(xiàn)「套件無效CRX-HEADER-INVALID」的報錯訊息，請百度參考：Chrome外掛安裝時出現(xiàn)"CRX-HEADER-INVALID"解決方法，安裝好後即可使用。

3.安裝完畢後圖示會出現(xiàn)在外掛程式列。

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

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

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

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

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

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

本站所有資源皆由網(wǎng)友貢獻(xiàn)或各大下載網(wǎng)站轉(zhuǎn)載。請自行檢查軟體的完整性！本站所有資源僅供學(xué)習(xí)參考。請不要將它們用於商業(yè)目的。否則，一切後果都由您負(fù)責(zé)！如有侵權(quán)，請聯(lián)絡(luò)我們刪除。聯(lián)絡(luò)方式：admin@php.cn