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 相关文章推荐
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
ES6中数组array新增方法实例总结
Nov 07 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
详解JVM系列之内存模型
Jun 10 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
基于python实现KNN分类算法
2020/04/23 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python Canny边缘检测算法的实现
2020/04/24 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
《月亮湾》教学反思
2014/04/14 职场文书
单位绩效考核方案
2014/05/11 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书