Angular調試插件AngularJS Batarang

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

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時，對應的內容會在頁面中高亮。

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

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn