快捷導(dǎo)航

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

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

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

Angular瀏覽器插件Batarang介紹

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

準(zhǔn)備工作

安裝Batarang：

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

使用

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

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

Models

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

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

Performance

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

Dependenices

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

Options

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

help

如有任何問(wèn)題，請(qǐng)查看help

Element

其實(shí)我最常用的應(yīng)該是Element右側(cè)的AngularJS Properties標(biāo)簽。在Element標(biāo)簽中選定某個(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è)功能。