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中发布/订阅模式的简单实例
Nov 05 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 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
我的论坛源代码(三)
2006/10/09 PHP
PHP的面试题集
2006/11/19 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue实现文字加密功能
2019/09/27 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python制作小说爬虫实录
2017/08/14 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
办公室年终个人自我评价
2013/10/28 职场文书
班干部演讲稿
2014/04/24 职场文书
计算机求职信
2014/07/02 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers