使用Chrome浏览器调试AngularJS应用的方法


Posted in Javascript onJune 18, 2015

当我们构建AngularJS应用时,通过浏览器(如Chrome,Firefox和IE)的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难。下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用,使得应用可以比较容易进行测试,修改,甚至实时的修改我们的Angular应用:
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()`来创建一个`targetNode`

2:查看作用域树

有些时候,我们需要查看页面中作用域层次来有效的调试我们的应用。AngularJS Batarang正是我们需要的一款Chrome浏览器的扩展,可以展示当前作用域层次,并具有其他非常有用的特性。

使用Chrome浏览器调试AngularJS应用的方法

3: 抓取任何服务

无论ngApp在哪里定义,我们都可以使用注入器功能来抓取任何的服务的引用(如果使用angular的bootstrap方法,则可以手动抓取$rootElement):
 

> 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浏览器的控制台有一堆不错的捷径 来调试浏览器应用。这是一些Angular开发中最好的做法:

  •     $0-$4: 访问最近在查看窗口中进行选取的 5 个DOM元素。选择抓取的范围非常方便。
  •     $(selector)和$$(selector): 分别是querySelector() 和 querySelectorAll的一个快速的替代

感谢 @zgohr 提供这种方法!

结论

通过几个简单的技巧,我们可以访问页面任何作用域中的数据,查看作用域层次结构,注入服务和控制指令。

所以下一次,如果你想稍微进行调整,检查自己的工作或者通过控制台控制AngularJS一个用,我希望你能记住这些命令,并且能做到像我一样觉得他们非常实用!

Javascript 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
原生js编写焦点图效果
Dec 08 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 #Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 #Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 #Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 #Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 #Javascript
浅谈Node.js中的定时器
Jun 18 #Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 #Javascript
You might like
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python实现数据图表
2017/07/29 Python
详解python eval函数的妙用
2017/11/16 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
python中取绝对值简单方法总结
2020/07/24 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
实习生自我鉴定
2013/12/12 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
应聘护士求职信
2014/07/21 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
新党章的学习心得体会
2014/11/07 职场文书
2014年消防工作总结
2014/11/21 职场文书
总经理检讨书范文
2015/02/16 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL