最新下载
谷歌浏览器插件Selenium IDE开源的WEB自动化工具
谷歌浏览器插件ARC Welder ARC 模拟器在Chrome上调用Android APK(介绍2020年最新使用方法)
谷歌浏览器插件Enhanced GitHub(原 GitHub Plus)方便下载Github项目内的单个文件
谷歌浏览器插件Designer Tools 测量并对齐Chrome中元素的前端开发插件
谷歌浏览器插件AdSense Active View Monitor 帮助站长监控Adsense Active View请求
谷歌浏览器插件WooRank SEO网页优化分析工具 跨境电商插件
Wappalyzer 帮助开发者了解当前网页使用了哪些技术
谷歌浏览器插件Extension SEO Chrome by Uplix.fr 分析、研究、优化SEO的工具
谷歌浏览器插件Live color picker 网页拾色器 支持十六进制、RGB、HSV格式
Mobile View Switcher 一键切换ChromePC版至移动版浏览效果
24小时阅读排行榜
- 1 css内联样式使用场景_是否影响维护成本
- 2 如何在 AnyChart 中通过按钮切换不同数据集的极坐标柱状图
- 3 为什么大型c++项目选择Bazel作为构建系统? (对比CMake的优势)
- 4 css height 百分比为什么不生效_盒模型高度计算条件
- 5 C++20 Modules与传统头文件相比有何优势? (编译速度提升)
- 6 css opacity 和 rgba 区别_透明效果实现方法说明
- 7 Gomoku AI 修复:Minimax 必须正确定义胜负评估以防止对手获胜
- 8 Go 中 ./... 语法详解:通配符模式匹配 Go 包路径
- 9 C++如何使用 sanitizers(ASan, TSan, UBSan)?C++代码质量保障工具集【调试】
- 10 css 垂直居中与行高_如何利用 line-height 实现文字垂直居中
- 11 css flex 布局中子项高度自适应失败怎么办_避免固定高度限制
- 12 如何在 GStreamer 中基于时间(秒)动态切换图像叠加层
- 13 如何使用GDB的Python脚本扩展c++调试能力? (自动化调试)
- 14 javascript AJAX是什么_如何实现无刷新数据请求?
- 15 Laravel 中如何将自定义命名的上传图片保存到数据库
最新教程
-
- Node.js 教程
- 15358 2025-08-28
-
- CSS3 教程
- 1544119 2025-08-27
-
- Rust 教程
- 22694 2025-08-27
-
- Vue 教程
- 25151 2025-08-22
-
- PostgreSQL 教程
- 21774 2025-08-21
-
- Git 教程
- 8789 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,可以多用一个这个功能。
