使用Chrome瀏覽器調試AngularJS應用的方法_AngularJS

當我們建立AngularJS應用程式時，透過瀏覽器（如Chrome，Firefox和IE）的JavaScript控制台存取應用程式中隱藏的資料和服務總是會有些困難。以下是一些簡單的技巧可以幫助我們透過Javascript控制台來查看或控制正在運行的Angular應用，使得應用可以比較容易進行測試，修改，甚至實時的修改我們的Angular應用：
1： 訪問作用域

透過一行簡單的JS程式存取頁面中任何作用域（甚至是隔離的作用域！）：
 

> angular.element(targetNode).scope()
-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

對於隔離作用域：

> angular.element(targetNode).isolateScope()
-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

這裡用`targetNode`作為HTML節點的參考。你可以非常輕鬆的透過`document.querySelector()`來建立一個`targetNode`

2：查看作用域樹

有些時候，我們需要查看頁面中作用域層次來有效的調試我們的應用。 AngularJS Batarang正是我們需要的一款Chrome瀏覽器的擴展，可以展示當前作用域層次，並具有其他非常有用的特性。

3： 抓取任何服務

無論ngApp在哪裡定義，我們都可以使用注入器功能來抓取任何的服務的參考（如果使用angular的bootstrap方法，則可以手動抓取$rootElement）：
 

> angular.element('html').injector().get('MyService')
-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

然後我們就可以對該服務進行調用，就像我們可以將服務注入一樣。

4: 存取控制器使用指令

有些指令定義了一個擁有某些額外（通常是分享）功能的控制器。為了從控制台存取一個給定指令的控制器實例，只需使用 controller() 方法：

> angular.element('my-pages').controller()
-> Constructor {}

最後一種做法更高級且不常用。
5: Chrome 控制台特性

Chrome瀏覽器的控制台有一堆不錯的捷徑 來調試瀏覽器應用。這是一些Angular開發中最好的做法：

•     $0-$4: 存取最近在檢視視窗中選取的 5 個DOM元素。選擇抓取的範圍非常方便。
•     $(selector)和$$(selector): 分別是querySelector() 和 querySelectorAll的一個快速的替代

感謝 @zgohr 提供這種方法!

結論

透過幾個簡單的技巧，我們可以存取頁面任何作用域中的數據，查看作用域層次結構，注入服務和控制指令。

所以下次，如果你想稍微進行調整，檢查自己的工作或透過控制台控制AngularJS一個用，我希望你能記住這些命令，並且能做到像我一樣覺得他們非常實用！