通過(guò)終端調(diào)試 AngularJS 應(yīng)用
當(dāng)我們構(gòu)建AngularJS應(yīng)用時(shí)，通過(guò)瀏覽器（如Chrome，F(xiàn)irefox和IE）的JavaScript控制臺(tái)訪問(wèn)應(yīng)用中隱藏的數(shù)據(jù)和服務(wù)總會(huì)有些困難。下面是一些簡(jiǎn)單的技巧可以幫助我們通過(guò)Javascript控制臺(tái)來(lái)查看或者控制正在運(yùn)行的Angular應(yīng)用，使得應(yīng)用可以比較容易進(jìn)行測(cè)試，修改，甚至實(shí)時(shí)的修改我們的Angular應(yīng)用：
1： 訪問(wèn)作用域
通過(guò)一行簡(jiǎn)單的JS程序訪問(wèn)頁(yè)面中任何作用域（甚至是隔離的作用域?。?/p>
- > angular.element(targetNode).scope()
- -> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}
對(duì)于隔離作用域：
- > angular.element(targetNode).isolateScope()
- -> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}
這里用`targetNode`作為HTML節(jié)點(diǎn)的引用。你可以非常輕松的通過(guò)`document.querySelector()`來(lái)創(chuàng)建一個(gè)`targetNode`
2：查看作用域樹(shù)
有些時(shí)候，我們需要查看頁(yè)面中作用域?qū)哟蝸?lái)有效的調(diào)試我們的應(yīng)用。AngularJS Batarang正是我們需要的一款Chrome瀏覽器的擴(kuò)展，可以展示當(dāng)前作用域?qū)哟危⒕哂衅渌浅Ｓ杏玫奶匦浴?/p>
3： 抓取任何服務(wù)
無(wú)論ngApp在哪里定義，我們都可以使用注入器功能來(lái)抓取任何的服務(wù)的引用（如果使用angular的bootstrap方法，則可以手動(dòng)抓取$rootElement）：
- > angular.element('html').injector().get('MyService')
- -> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}
然后我們就可以對(duì)該服務(wù)進(jìn)行調(diào)用，就像我們可以將服務(wù)注入一樣。
4: 訪問(wèn)控制器使用指令
一些指令定義了一個(gè)擁有某些額外（通常是分享）功能的控制器。為了從控制臺(tái)訪問(wèn)一個(gè)給定指令的控制器實(shí)例，只需使用 controller() 方法：
- > angular.element('my-pages').controller()
- -> Constructor {}
***一種做法更高級(jí)并且不常用。
5: Chrome 控制臺(tái)特性
Chrome瀏覽器的控制臺(tái)有一堆不錯(cuò)的捷徑 來(lái)調(diào)試瀏覽器應(yīng)用。這是一些Angular開(kāi)發(fā)中***的做法：
-
$0-$4: 訪問(wèn)最近在查看窗口中進(jìn)行選取的 5 個(gè)DOM元素。選擇抓取的范圍非常方便。
-
$(selector)和$$(selector): 分別是querySelector() 和 querySelectorAll的一個(gè)快速的替代
感謝 @zgohr 提供這種方法!
結(jié)論
通過(guò)幾個(gè)簡(jiǎn)單的技巧，我們可以訪問(wèn)頁(yè)面任何作用域中的數(shù)據(jù)，查看作用域?qū)哟谓Y(jié)構(gòu)，注入服務(wù)和控制指令。
所以下一次，如果你想稍微進(jìn)行調(diào)整，檢查自己的工作或者通過(guò)控制臺(tái)控制AngularJS一個(gè)用，我希望你能記住這些命令，并且能做到像我一樣覺(jué)得他們非常實(shí)用！
