[转]调试AngularJS应用

原文链接：Debugging AngularJS Apps from the Console

　　当我们开发AngularJS应用的时候，我们想在Chrome/FF/IE控制台调试隐藏在应用中的数据和服务的很困难的，下面是一些小技巧，可以来检测和监控正在运行的应用程序，这使我们开发、调试、修改angular应用变的较为容易。

1.Access Scopes
我们可以访问任何作用域（甚至一个独立作用域），在页面使用单行JS即可实现：

1	> angular.element(targetNode).scope()

2	-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

或者一个隔离的作用域：

1	> angular.element(targetNode).isolateScope()

2	-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

其中targetNode是节点Dom对象，可以使用document.getElementById(),document.querySelector()等来获取。如果你不知道querySelector方法如何使用及兼容性问题，请戳这里。

2.Inspect the Scope Tree
可以使用Chrome的AngularJS BataRang插件。

3.Grab any Services
可以通过注入服务的ngApp，或者.ng-scope类名来调用：

1	> angular.element(document.querySelector('html')).injector().get('MyService')

2	-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

3	// Or slightly more generic

4	> angular.element(document.querySelector('.ng-scope')).injector().get('MyService')

这是我们就可以调用服务的方法了，就想我们注入了服务，我们可以调用服务的方法一样。

4.Access controller for directive
Some directives define a controller with certain additional (often shared) functionality. To access the instance of a controller for a given directive from the console, just use the controller() function:
在我们定义的时候，会把一些公共的功能放到控制器中，为了访问控制器的实例，我们只要使用controller()方法就可以：

1	> angular.element('my-pages').controller()

2	-> Constructor {}

5.Chrome Console Features
Chrome我们提供一些好的快捷方式，在控制台中debug 我们的浏览器应用，在AngularJS开发中，下面有些最好的方式：
a)$0 – $4: Access the last 5 DOM elements selected in the inspector window. This is convenient for grabbing scopes for selected elements: angular.element($0).scope()

b)$(selector) and $$(selector): A quick replacement for querySelector() and querySelectorAll, respectively.