Angular浏览器插件Batarang介绍及使用


Posted in Javascript onFebruary 07, 2018

Angular浏览器插件Batarang介绍

对于Angular新手来说,刚接手Angular的时候都会比较痛苦。确实,相对于JQuery、Backbone等,Angular门槛确实相对较高,而且比较难以调试。今天给大家带来一个Angular Chrome 插件Batarang的介绍,运用好改插件,会帮助加深对Angular的理解。

准备工作

安装Batarang:

  1. 方法一:在Chrome应用商店中查找Batarang,并安装。
  2. 方法二:在网上查找Batarang的安装包,直接在Chrome浏览器中安装。

使用

在已安装的Batarang插件的浏览器中打开一个Angular应用,并打开控制台,如下图:

Angular浏览器插件Batarang介绍及使用

会发现控制台中多了一个AngularJS的页面,勾选“Enable”,该控件就可以使用了:

Models

点开Models,如下图,左侧是该应用下的所有Scope的信息,右侧是Scope对应的模型信息。点击某个作用域,右侧相应的会显示出该作用域中的所有模型信息。

点击Scope前的”<”,会跳到Elements中该作用域所在的DOM标签上。

Angular浏览器插件Batarang介绍及使用

Performance

Performace展示的是该应用的性能,左侧显示的是监控树,右侧显示的是监控表达式的性能,这个页面能帮助我们进行性能优化。

Angular浏览器插件Batarang介绍及使用

Dependenices

Dependenices展示的指令和服务之间的依赖关系,选定某个指令,可以看到其依赖的服务。

Angular浏览器插件Batarang介绍及使用

Options

最后是options页面。有三个选项:”show applications,” “show scopes,” 和 “show bindings.”。每个选项勾选时,在debugger时,相应的内容会在页面高亮。

Angular浏览器插件Batarang介绍及使用
Angular浏览器插件Batarang介绍及使用

help

如有任何问题,请查看help

Element

其实我最常用的应该是Element右侧的AngularJS Properties标签。在Element标签中选定某个标签时,Element页面的右侧的内容,会多一个AngularJS Properties页面,该页面显示的是选定的html内容的作用域的属性,该功能对于对Angular Scope的理解非常有用。如果不是很理解Angular Scope,可以多用一个这个功能。

Angular浏览器插件Batarang介绍及使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
详解JS数值Number类型
Feb 07 #Javascript
vue几个常用跨域处理方式介绍
Feb 07 #Javascript
vue项目中axios使用详解
Feb 07 #Javascript
vue-cli webpack2项目打包优化分享
Feb 07 #Javascript
浅谈es6中export和export default的作用及区别
Feb 07 #Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 #Javascript
vue中如何使用ztree
Feb 06 #Javascript
You might like
twig模板获取全局变量的方法
2016/02/05 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
PHP实现简单的计算器
2020/08/28 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
JS实现小星星特效
2019/12/24 Javascript
vue实现信息管理系统
2020/05/30 Javascript
python集合类型用法分析
2015/04/08 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python科学画图代码分享
2017/11/29 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
2014信息公开实施方案
2014/02/22 职场文书
感恩教育月活动总结
2014/07/07 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
Java 数组的使用
2022/05/11 Java/Android