最新下载
谷歌浏览器插件Cookie master 好用的cookie编辑和管理工具
简化 GitHub 界面并实用的浏览器扩展 Refined GitHub
Python Shell测试python代码、测试正则表达式
Sourcegraph 更好地在Github上阅读和理解项目代码的工具
谷歌浏览器插件FontViz 轻松查找出网站网页上使用的字体
谷歌浏览器插件ReColor 检查电脑屏幕的坏点噪点的插件
谷歌浏览器插件User
谷歌浏览器插件SNAP检测「SnapTest」Selenium IDE替代品
谷歌浏览器插件Jam 网页开发 找bug的工具 错误报告工具 记录浏览器中的错误
24小时阅读排行榜
- 1 c++中如何将字符串转换为double_c++ string转double方法【汇总】
- 2 C#怎么从XML中读取数据并绑定到DataGridView
- 3 BizTalk Server中的XML映射器(Mapper)使用详解
- 4 c# LMAX Disruptor .NET port 和 Channel 的性能对比
- 5 C# Linq to XML怎么用 Linq查询XML教程
- 6 css 背景图片覆盖时颜色不明显怎么办_rgba 半透明遮罩层
- 7 javascript事件冒泡与捕获有何区别?【教程】
- 8 如何在上传时处理GB18030等非UTF-8编码的XML文件
- 9 javascript如何操作数组_数组方法如何使用【教程】
- 10 css fixed 定位在移动端失效怎么办_通过浏览器兼容与替代方案分析
- 11 如何为Golang项目初始化模块_Go mod初始化步骤说明
- 12 如何在XML中嵌入二进制数据 Base64编码
- 13 C#怎么发送HTTP POST请求 C# HttpClient发送JSON数据方法
- 14 css 框架与响应式设计_如何使用框架快速实现自适应布局
- 15 Dapper怎么查询并返回dynamic列表 Dapper动态类型查询用法
最新教程
-
- Node.js 教程
- 15938 2025-08-28
-
- CSS3 教程
- 1546068 2025-08-27
-
- Rust 教程
- 23122 2025-08-27
-
- Vue 教程
- 25596 2025-08-22
-
- PostgreSQL 教程
- 22103 2025-08-21
-
- Git 教程
- 9099 2025-08-21
如今从事前端开发,大行其道的MVVM框架,决计是绕不过去的存在。那么以下是三大流行框架 Devtools,如需自取。Vue.js devtools、AngularJS BatarangReact 、Developer Tools。本文主要介绍的就是AngularJS Batarang
AngularJS Batarang插件使用方法
AngularJS Batarang插件离线安装的方法参照一下方法:老版本chrome浏览器,首先在标签页输入【chrome://extensions/】进入chrome扩展程序,解压你在本站下载的插件,并拖入扩展程序页即可。

2.最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息,请百度参照:Chrome插件安装时出现"CRX-HEADER-INVALID"解决方法,安装好后即可使用。

3.安装完毕后图标会出现在插件栏里。

4.在chrome浏览器中打开一个Angular应用,并打开控制台,如下图,会发现控制台中多了一个AngularJS的页面,勾选“Enable”,该控件就可以使用了。

5.点开Models,如下图,左侧是该应用下的所有Scope的信息,右侧是Scope对应的模型信息。点击某个作用域,右侧相应的会显示出该作用域中的所有模型信息。 点击Scope前的”<”,会跳到Elements中该作用域所在的DOM标签上。

6.Performace展示的是该应用的性能,左侧显示的是监控树,点击树的节点,跳转至相应的element元素上。右侧显示的是监控表达式的性能,这个页面能帮助我们进行性能优化。

7.Dependenices展示的指令和服务之间的依赖关系,选定某个指令,可以看到其依赖的服务。通过图表把服务之间的依赖关系可视化,红线代表依赖
8.最后是options页面。有三个选项:”show applications,” “show scopes,” 和 “show bindings.”。每个选项勾选时,在debugger时,相应的内容会在页面高亮。
9.如有任何问题,请查看help
10.在Element标签中选定某个标签时,Element页面的右侧的内容,会多一个AngularJS Properties页面,该页面显示的是选定的html内容的作用域的属性,该功能对于对Angular Scope的理解非常有用。如果不是很理解Angular Scope,可以多用一个这个功能。
