使用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继承(上)——对象构建介绍
Nov 08 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
销售部主管岗位职责
2013/12/18 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
学前班语言教学计划
2015/01/20 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers