在控制台中调试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控制台中调试应用。希望本文对你有所帮助。