AngularJS 如何在控制台进行错误调试


Posted in Javascript onJune 07, 2016

当我们在编写 AngularJS 的应用时,通过 Chrome, Firefox, 和 IE 的 JavaScript 控制台来获取隐藏在应用之中的数据(Data)和服务(Service) 是一件非常具有挑战性的工作。下面列出了一些简单的小窍门,可以帮助我们使用 Javascript 控制台来监视和控制一个正在运行的 Angular 应用,使其更加容易测试、修改甚至是实时的编写 Angular 应用。

1: 获取 Scopes (作用域)

我们可以使用一行 JS 代码来获取任何的 Scope (甚至是 isolated scopes) :

> angular.element(targetNode).scope()

-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

或者获取 isolated scopes:

> angular.element(targetNode).isolateScope()

-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

这里面的 targetNode 指的是 HTML Node(HTML节点)。你可以很容易的使用 document.querySelector() 来获取。

2: 监视 Scope Tree (作用域树)

为了更好的调试我们的应用,有些时候我们需要查看页面上的 Scope (作用域) 的结构师怎样的。这时候我们就需要使用 AngularJS
 Baratang 和 ng-inspector 这两个 Chrome 浏览器扩展来帮助我们实时查看 Scope (作用域) 的情况。并且,这两个扩展还有一些其他非常有用的功能。

    (1).AngularJS Baratang

AngularJS 如何在控制台进行错误调试

    (2).ng-inspector

AngularJS 如何在控制台进行错误调试

3: 抓取 Services (服务)

我们可以使用定义了 ngApp 元素的 injector 函数来抓取任何 Service (服务) 或者间接的通过任何带有 ng-scope class 的元素来获取 Service (服务)。

> angular.element(document.querySelector('html')).injector().get('MyService')

-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

// Or slightly more generic

> angular.element(document.querySelector('.ng-scope')).injector().get('MyService')

接下来我们就可以使用相关的 Service 就像我们在程序中 injected(注入)过之后那样使用。

4: 从 directive 中获取 controller

有一些 directives (指令) 会将一些特定(通常是可以共用的)功能定义成为一个控制器。为了从控制台中获取一个指定 directive (指令) 的 controller (控制器) 示例, 我们只需要使用 controller() 函数。

> angular.element('my-pages').controller()

-> Constructor {}

最后一个不常用但是属于更高级的技巧。

5: Chrome Console(控制台) 特性

Chrome 有很多在 console (控制台) 中用于调试网页应用的非常好用的快捷命令。下面是对 Angular 开发最有帮助的一些命令:

    $0 - $4: 在 instpector window (监控器) 中获取最后的 5 个 DOM 元素。这个快捷方法可以非常方便的帮助我们来抓取选定元素的 scopes (作用域) : angular.element($0).scope()

    $(selector) 和 $$(selector): 可以方便的替代 querySelector() 和 querySelectorAll。

感谢 @zgohr 提供的这个小窍门!

总结

通过这些简单的小窍门,我们可以获取任意 scope (作用域) 中的数据、监控scope (作用域) 的层级、注入 services (服务) 并且 控制 directives (指令)。

所以下次,当你想要做一些微调、检查代码或者从控制台来控制一个 AngularJS 应用,我希望你能够像我一样记起这些小窍门并多加使用。

查看更多AngularJS的语法,大家可以关注:AngularJS 参考手册英文版,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
详解Layer弹出层样式
Aug 21 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
JQuery异步加载PartialView的方法
Jun 07 #Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 #Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 #Javascript
PassWord输入框代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 #Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 #Javascript
You might like
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
校三好学生主要事迹
2014/01/11 职场文书
货车司机岗位职责
2014/03/18 职场文书
活动策划求职信模板
2014/04/21 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
安全员岗位职责范本
2015/04/11 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
利用Apache Common将java对象池化的问题
2022/06/16 Servers