转：在控制台中调试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
在上⾯的代码中，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…
angular和angularjs我们可以调⽤服务中的任何⽅法，就好⽐我们已经将它注⼊到了控制台中。
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控制台中调试应⽤。希望本⽂对你有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。