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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
layui导出所有数据的例子
Sep 10 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 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
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python图像读写方法对比
2020/11/16 Python
用python批量下载apk
2020/12/29 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
销售团队获奖感言
2014/08/14 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
导师鉴定意见
2015/06/05 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫