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 读取xml,写入xml 实现代码
Jul 10 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
JS实现普通轮播图特效
Jan 01 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
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python二分查找详解
2015/09/13 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python callable()函数用法实例分析
2018/03/17 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
pycharm的python_stubs问题
2020/04/08 Python
Python分类测试代码实例汇总
2020/07/23 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
硕士研究生自我鉴定
2013/11/08 职场文书
会计应聘求职信范文
2013/12/17 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
实习报告评语
2014/04/26 职场文书
团队队名口号大全
2014/06/06 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
高三语文复习计划
2015/01/19 职场文书
项目负责人岗位职责
2015/02/15 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书