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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
js实现的网页颜色代码表全集
Jul 17 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
JavaScript中对象介绍
Dec 31 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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
中国收音机工业发展史
2021/03/02 无线电
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
详解angular element()方法使用
2017/04/08 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python绘制随机网络图形示例
2019/11/21 Python
使用python实现飞机大战游戏
2020/03/23 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
一些PHP的面试题
2015/05/06 面试题
实习医生自我评价
2013/09/22 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
会计专业自荐信
2014/06/03 职场文书
励志演讲稿500字
2014/08/21 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2015年企业新年寄语
2014/12/08 职场文书
法定代表人身份证明书
2015/06/18 职场文书