码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-11 10:56:11      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:des   blog   http   io   使用   java   ar   数据   问题   

在控制台中调试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扩展,它能够展示实时的层级作用域,并且具有许多非常有帮助的功能。

bubuko.com,布布扣

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

bubuko.com,布布扣

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

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

标签:des   blog   http   io   使用   java   ar   数据   问题   

原文地址:http://www.cnblogs.com/stephenykk/p/3965806.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!