使用Chrome浏览器调试AngularJS应用的方法  更新时间:2015年06月18日 15:26:07   投稿:goldensun   这篇文章主要介绍了使用Chrome浏览器调试AngularJS应用的方法,AngularJS是非常热门的JavaScript库,需要的朋友可以参考下 当我们构建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浏览器的扩展,可以展示当前作用域层次,并具有其他非常有用的特性。 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一个用,我希望你能记住这些命令,并且能做到像我一样觉得他们非常实用! 您可能感兴趣的文章: JS使用Chrome浏览器实现调试线上代码 浏览器调试动态js脚本的方法(图解) chrome浏览器如何断点调试异步加载的JS 谷歌浏览器调试JavaScript小技巧 利用浏览器的Javascript控制台调试PHP程序 10个基于浏览器的JavaScript调试工具分享 调试Javascript代码(浏览器F12及VS中debugger关键字) 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解 浏览器JavaScript调试功能无法使用解决方案 AngularJS 相关文章 AngularJS实现的锚点楼层跳转功能示例 这篇文章主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下 2018-01-01 angularjs实现文字上下无缝滚动特效代码 这篇文章主要介绍了angularjs实现文字上下无缝滚动特效代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2016-09-09 Angular 实现输入框中显示文章标签的实例代码 这篇文章主要介绍了Angular 实现输入框中显示文章标签的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-11-11 AngularJS中取消对HTML片段转义的方法例子 这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下 2015-01-01 angular4中关于表单的校验示例 本篇文章主要介绍了angular4中关于表单的校验示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 AngularJS入门教程中SQL实例详解 本文主要介绍 AngularJS SQL,这里给大家整理了相关资料,并提供了实例代码,有需要的小伙伴可以参考下 2016-07-07 Angular动态添加、删除输入框并计算值实例代码 这篇文章主要介绍了Angular动态添加、删除输入框并计算值实例代码的相关资料,需要的朋友可以参考下 2017-03-03 深入浅析AngularJS中的module(模块) 我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ,感兴趣的朋友一起学习吧 2016-01-01 Angular如何在应用初始化时运行代码详解 这篇文章主要给大家介绍了关于Angular如何在应用初始化时运行代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2018-06-06 AngularJS中关于ng-class指令的几种实现方式详解 这篇文章给大家介绍了angularJS中ng-class指令的三种实现方式,其中包括通过数据的双向绑定、通过对象数组和通过key/value这三种方式,有需要的朋友们可以参考学习,下面来一起看看吧。 2016-09-09 最新评论

当我们构建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浏览器的扩展,可以展示当前作用域层次,并具有其他非常有用的特性。

2015618152130710.png (783×486)

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一个用,我希望你能记住这些命令,并且能做到像我一样觉得他们非常实用!

您可能感兴趣的文章:

  • JS使用Chrome浏览器实现调试线上代码
  • 浏览器调试动态js脚本的方法(图解)
  • chrome浏览器如何断点调试异步加载的JS
  • 谷歌浏览器调试JavaScript小技巧
  • 利用浏览器的Javascript控制台调试PHP程序
  • 10个基于浏览器的JavaScript调试工具分享
  • 调试Javascript代码(浏览器F12及VS中debugger关键字)
  • 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
  • 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
  • 浏览器JavaScript调试功能无法使用解决方案
张贴在3