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

AngularJS Batarang插件使用方法

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ò)訊息，請(qǐng)百度參考：Chrome外掛安裝時(shí)出現(xiàn)"CRX-HEADER-INVALID"解決方法，安裝好後即可使用。

3.安裝完畢後圖示會(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è)作用域，右邊對(duì)應(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)至對(duì)應(yīng)的element元素上。右側(cè)顯示的是監(jiān)控表達(dá)式的效能，這個(gè)頁(yè)面能幫助我們進(jìn)行效能最佳化。

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

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

10.在Element選項(xiàng)中某個(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è)功能。 免責(zé)聲明

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