使用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 相关文章推荐
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
微信小程序支付功能 php后台对接完整代码分享
Jun 12 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常用编译参数中文说明
2014/09/27 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
JS实现带动画的回到顶部效果
2017/12/28 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python字符遍历的艺术
2008/09/06 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
购买原创艺术品:Zatista
2019/11/09 全球购物
linux下进程间通信的方式
2014/12/23 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
《湘夫人》教学反思
2014/02/21 职场文书
合作意向协议书范本
2014/03/31 职场文书
临时租车协议范本
2014/09/23 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers