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 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
详解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
我的论坛源代码(三)
2006/10/09 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
完美的php分页类
2017/10/24 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python常用知识点汇总
2016/05/08 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python中四舍五入的正确打开方式
2021/01/18 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
体育教师自荐信范文
2013/12/16 职场文书
教师一岗双责责任书
2014/04/16 职场文书
授权收款委托书
2014/09/23 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL