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 页面划词搜索JS
Sep 28 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
javascript实现微信分享
Dec 23 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
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数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
提高php编程效率技巧
2015/08/13 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
jquery实现拖动效果
2016/08/10 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
基于keras中的回调函数用法说明
2020/06/17 Python
利用Python优雅的登录校园网
2020/10/21 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
python 基于wx实现音乐播放
2020/11/24 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
店长岗位职责
2015/02/11 职场文书
英语辞职信范文
2015/02/28 职场文书
入党积极分子群众意见
2015/06/01 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书