當(dāng)我們?cè)诰帉?AngularJS 的應(yīng)用時(shí)，通過(guò) Chrome, Firefox, 和 IE 的 JavaScript 控制臺(tái)來(lái)獲取隱藏在應(yīng)用之中的數(shù)據(jù)(Data)和服務(wù)(Service) 是一件非常具有挑戰(zhàn)性的工作。下面列出了一些簡(jiǎn)單的小竅門，可以幫助我們使用 Javascript 控制臺(tái)來(lái)監(jiān)視和控制一個(gè)正在運(yùn)行的 Angular 應(yīng)用，使其更加容易測(cè)試、修改甚至是實(shí)時(shí)的編寫 Angular 應(yīng)用。

1: 獲取 Scopes (作用域)

我們可以使用一行 JS 代碼來(lái)獲取任何的 Scope (甚至是 isolated scopes) :

或者獲取 isolated scopes:

這里面的 targetNode 指的是 HTML Node(HTML節(jié)點(diǎn))。你可以很容易的使用 document.querySelector() 來(lái)獲取。

2: 監(jiān)視 Scope Tree (作用域樹)

為了更好的調(diào)試我們的應(yīng)用，有些時(shí)候我們需要查看頁(yè)面上的 Scope (作用域) 的結(jié)構(gòu)師怎樣的。這時(shí)候我們就需要使用 AngularJS
 Baratang 和 ng-inspector 這兩個(gè) Chrome 瀏覽器擴(kuò)展來(lái)幫助我們實(shí)時(shí)查看 Scope (作用域) 的情況。并且，這兩個(gè)擴(kuò)展還有一些其他非常有用的功能。

    (1).AngularJS Baratang

    (2).ng-inspector

3: 抓取 Services (服務(wù))

我們可以使用定義了 ngApp 元素的 injector 函數(shù)來(lái)抓取任何 Service (服務(wù)) 或者間接的通過(guò)任何帶有 ng-scope class 的元素來(lái)獲取 Service (服務(wù))。

接下來(lái)我們就可以使用相關(guān)的 Service 就像我們?cè)诔绦蛑?injected（注入）過(guò)之后那樣使用。

4: 從 directive 中獲取 controller

有一些 directives (指令) 會(huì)將一些特定（通常是可以共用的）功能定義成為一個(gè)控制器。為了從控制臺(tái)中獲取一個(gè)指定 directive (指令) 的 controller (控制器) 示例, 我們只需要使用 controller() 函數(shù)。

最后一個(gè)不常用但是屬于更高級(jí)的技巧。

5: Chrome Console(控制臺(tái)) 特性

Chrome 有很多在 console (控制臺(tái)) 中用于調(diào)試網(wǎng)頁(yè)應(yīng)用的非常好用的快捷命令。下面是對(duì) Angular 開發(fā)最有幫助的一些命令：

    $0 - $4: 在 instpector window (監(jiān)控器) 中獲取最后的 5 個(gè) DOM 元素。這個(gè)快捷方法可以非常方便的幫助我們來(lái)抓取選定元素的 scopes (作用域) : angular.element($0).scope()

    $(selector) 和 $$(selector): 可以方便的替代 querySelector() 和 querySelectorAll。

感謝 @zgohr 提供的這個(gè)小竅門!

總結(jié)

通過(guò)這些簡(jiǎn)單的小竅門，我們可以獲取任意 scope (作用域) 中的數(shù)據(jù)、監(jiān)控scope (作用域) 的層級(jí)、注入 services (服務(wù)) 并且 控制 directives (指令)。

所以下次，當(dāng)你想要做一些微調(diào)、檢查代碼或者從控制臺(tái)來(lái)控制一個(gè) AngularJS 應(yīng)用，我希望你能夠像我一樣記起這些小竅門并多加使用。

查看更多AngularJS的語(yǔ)法，大家可以關(guān)注：AngularJS 參考手冊(cè)英文版，也希望大家多多支持腳本之家。