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 相关文章推荐
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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 - Html Transfer Code
2006/10/09 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python闭包函数定义与用法分析
2018/07/20 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
护士自荐信怎么写
2013/10/18 职场文书
机电系毕业生求职信
2014/07/11 职场文书
离婚协议书范本样本
2014/08/19 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
基于Go语言构建RESTful API服务
2021/07/25 Golang
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS
python 使用pandas读取csv文件的方法
2022/12/24 Python