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

时间: 2024-11-02 23:24:58

转:在控制台中调试AngularJS应用的相关文章

在控制台中调试 AngularJS 应用(译/改)

当我们在编写 AngularJS 的应用时,通过 Chrome, Firefox, 和 IE 的 Javascript 控制台来获取隐藏在应用之中的数据(Data)和服务(Service) 是一件非常具有挑战性的工作.下面列出了一些简单的小窍门,可以帮助我们使用 Javascript 控制台来监视和控制一个正在运行的 Angular 应用,使其更加容易测试.修改甚至是实时的编写 Angular 应用. 1: 获取 Scopes (作用域) 我们可以使用一行 JS 代码来获取任何的 Scope (

Chrome 开发者控制台中,你可能意想不到的功能

Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代码时,我只会使用JavaScript控制台来打印服务器返回值或变量值.但随着时间推移和教程的帮助,我发现这个控制台能做的事远远超乎我的想象. 接下来我们说说你可以通过控制台做到的事情.如果你在电脑的 Chrome 浏览器(或其他浏览器)中阅读这篇文章,你可以立刻打开开发者工具并尝试. 1. 选取DO

Jenkins控制台中乱码问题

由于服务器环境及应用层各版本的不同.编码方式的不同因此会有很多种情况会出现乱码问题. 由于Jenkins中的job运行的是独立的一个shell环境,许多的环境变量与服务器中是不一样的,因此在job中执行的命令也就会有所差异. 因此可以在job中执行env命令,同时在服务器中执行env命令查看环境的异同点. 对于Jenkins中乱码问题,首先,确保Jenkins的容器如Glassfish,Tomcat的编码是正确的,已设置成如UTF-8编码. 若还有乱码,做如下尝试: 系统管理--系统设置,添加编

C# 计算字符串在控制台中的显示长度

C# 计算字符串在控制台中的显示长度? 警告 您当前查看的页面是未经授权的转载! 如果当前版本排版错误,请前往查看最新版本:http://www.cnblogs.com/qin-nz/p/csharp-calculate-string-display-length.html 提示 更新时间:2016年01月09日. 本作品由勤奋的小孩创作,采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可. 欢迎转载,但任何转载必须保留完整文章,在显要地方显示署名以及原文链接( http

百度 主页中在控制台中

try{ if(window.console&&window.console.log) {console.log("一张网页,要经历怎样的过程,才能抵达用户面前?\n 一位新人,要经历怎样的成长,才能站在技术之巅?\n 探寻这里的秘密:\n 体验这里的挑战:\n 成为这里的主人:\n 加入百度,加入网页搜索,你,可以影响世界.\n"); console.log("请将简历发送至 %c [email protected]( 邮件标题请以“姓名-应聘XX职位-来自

利用跨域请求来隐藏firbug控制台中的Ajax请求

普通jquery的Ajax请求在控制台中是可见的,如下: 而在利用jsonp(json with padding)进行Ajax跨域时,发现Ajax请求不会在控制台显示. 跨域代码如下: 前端代码: $.ajax({ type : "get", //jquey不支持post方式跨域 async:false, url : "http://www.cnblog.com", //跨域请求的URL dataType : "jsonp", //传递给后端,用

从控制台中读取密码 - C#

Tip :    从控制台中读取密码 语言: C# ______________________________________________________________ 在登陆Linux系统的时候,体验过在Linux的shell命令行窗口中输入用户密码吗? 下面体验下在Windows控制台中输入密码的方式 Showing  Effect SourceCode /// <summary> /// Read password from console /// </summary>

关于 JavaScript 中一个小细节问题 (在控制台中直接 {} 对象报错问题)

在 Chrome 浏览器,大家可能遇到这样一个小问题. 随便输入一个 Object 对象  ,比如 {Name:'王尼玛',Age:20} ,将会报错.之前,也从来没去考虑过到底是为啥原因. 今天,刚好看到博客园有博友文章,顺便记录一下. 在 JavaScript 中, : 有三种作用,想必大家都知道,其一  三元表达式  true? A:B,其二 在 switch case 中 case 语句中会用到,其三 就是上图中,对象直接量表达式中. 其实 ,在 JS 中,: 还有一种用法,如下所示,内

在 C# 控制台中记录异常日志并输出

最近做了一个小程序,要求在控制台中记录程序运行的异常并输出到指定的文件夹中,以下是我的具体的程序代码: public static void ErrorLog(Exception ex) { string FilePath = "/ErrorLog.txt"; StringBuilder msg = new StringBuilder (); msg.Append("*************************************** \n"); msg.