使用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 相关文章推荐
js 字符串转化成数字的代码
Jun 29 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
window.location.hash知识汇总
Nov 09 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
使用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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
php curl_init函数用法
2014/01/31 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
常用的javascript function代码
2008/05/23 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python:socket传输大文件示例
2017/01/18 Python
python 不以科学计数法输出的方法
2018/07/16 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
详解python中各种文件打开模式
2020/01/19 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
语文教学感言
2014/02/06 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
医德考评自我评价
2014/09/14 职场文书
2014年社区工作总结
2014/11/18 职场文书
离婚协议书样本
2015/01/26 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书