快捷導(dǎo)航

Angular瀏覽器插件Batarang介紹及使用

更新時(shí)間：2018年02月07日 10:42:12 作者：fangjuanyuyue

本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Angular瀏覽器插件Batarang介紹

對于Angular新手來說，剛接手Angular的時(shí)候都會比較痛苦。確實(shí)，相對于JQuery、Backbone等，Angular門檻確實(shí)相對較高，而且比較難以調(diào)試。今天給大家?guī)硪粋€Angular Chrome 插件Batarang的介紹，運(yùn)用好改插件，會幫助加深對Angular的理解。

準(zhǔn)備工作

安裝Batarang：

方法一：在Chrome應(yīng)用商店中查找Batarang，并安裝。
方法二：在網(wǎng)上查找Batarang的安裝包，直接在Chrome瀏覽器中安裝。

使用

在已安裝的Batarang插件的瀏覽器中打開一個Angular應(yīng)用，并打開控制臺，如下圖：

會發(fā)現(xiàn)控制臺中多了一個AngularJS的頁面，勾選“Enable”，該控件就可以使用了：

Models

點(diǎn)開Models，如下圖，左側(cè)是該應(yīng)用下的所有Scope的信息，右側(cè)是Scope對應(yīng)的模型信息。點(diǎn)擊某個作用域，右側(cè)相應(yīng)的會顯示出該作用域中的所有模型信息。

點(diǎn)擊Scope前的”<”，會跳到Elements中該作用域所在的DOM標(biāo)簽上。

Performance

Performace展示的是該應(yīng)用的性能，左側(cè)顯示的是監(jiān)控樹，右側(cè)顯示的是監(jiān)控表達(dá)式的性能，這個頁面能幫助我們進(jìn)行性能優(yōu)化。

Dependenices

Dependenices展示的指令和服務(wù)之間的依賴關(guān)系，選定某個指令，可以看到其依賴的服務(wù)。

Options

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

help

如有任何問題，請查看help

Element

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