转:在控制台中调试AngularJS应用

在控制台中调试AngularJS应用

在创建AngularJS应用时，一个很棘手的问题是如何在Chrome，Firefox，以及IE的JavaScript控制台中访问深藏在应用中的数据和服务。本文将会介绍一些如何从JavaScript控制台中监视和控制AngularJS应用的小技巧，来帮助你更加轻松的对AngularJS进行实时的测试修改。

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()来轻松的获取这个节点。

2：监视作用域树

有时我们需要观察作用域在实际页面中的情况，以此来更好的调试我们的应用。AngularJS Batarang是一个Chrome扩展，它能够展示实时的层级作用域，并且具有许多非常有帮助的功能。

AngularJS Batarang是一个好东西，但是目前这个项目似乎是属于无人维护的状态，因此我们有一个其他的选择：ng-inspector。它的功能和Batarang有相似之处，但是就我使用的感觉，ng-inspector更加直观易懂，并且它还有Safari扩展的版本。从AngularJS社区的人气来看，ng-inspector略胜一筹。

3:获取任何服务

我们可以在ngApp所位于的元素(如果手动来启动AngularJS的话，你需要使用$rootScope所在的元素)上使用injector函数来获取任何服务的引用。

> 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在控制台中拥有很多非常棒的小功能。下面列出的几个是对于AngularJS应用开发很有用的小功能：

• $0 - $4：用来访问最近5个在监视器窗口中被选中的DOM元素。这对于获取某个选中元素的作用域来说非常方便：angular.element($0).scope()

• $(selector) 和 $$(selector)：用来代替 querySelector 和 querySelectorAll

总结

使用上面这些小技巧，我们可以轻松的获取页面中的任何作用域中数据，监视作用域的层级结构，注入服务，以及控制指令。

今后如果你遇到了一些问题，你大可以使用在本文中学到的方法，直接在JavaScript控制台中调试应用。希望本文对你有所帮助。