使用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 相关文章推荐
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
javascript操作css属性
Dec 30 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python如何实现文本转语音
2016/08/08 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
Unix/Linux开发面试题
2016/08/16 面试题
毕业自我评价
2014/02/05 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书