【介绍】

Angularjs batarang将会在Chrome中增加一个控件，您可以在网页中打开一个AngularJS程序，使用该控件对其进行脚本编译和调试。它会显示调试程序的性能，您可以在监控树目录中点击某个节点，跳转并查看具体的元素。

运用方式

1、AngularJS Batarang插件离线装载的方式参照一下方式：老版本chrome阅读器，起首在标签页输入【chrome://extensions/】进入chrome扩大顺序，解压你在本站下载的插件，并拖入扩大顺序页便可。

2、最新版本的chrome阅读器直接拖放装载时会呈现顺序包有效CRX-HEADER-INVALID的报错信息，参照：Chrome插件装载时呈现quot;CRX-HEADER-INVALIDquot;处理方式，装载好后便可运用。

3、装载终了后图标会呈现在插件栏里。

4、在chrome阅读器中翻开一个Angular运用，并翻开节制台，以下图，会发现节制台中多了一个AngularJS的页面，勾选Enable，该控件便可以运用了。

5、点开Models，以下图，左边是该运用下的一切Scope的信息，右边是Scope对应的模型信息。点击某个感化域，右边响应的会展示出该感化域中的一切模型信息。 点击Scope前的lt;，会跳到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，可以多用一个这个性能。

小编评测

此插件可以有效地加速AngularJS程序开发的进程，您可以看到程序所有Scope信息，以及Scope对应的模型信息，您可以通过鼠标点击想查看的Scope项目，打开Elements中该作用域所在的DOM标签。

好了，今天的Angularjs batarang分享就到这里了，想要下载更多软件就来软件爱好者，快快收藏吧，更多精彩不容错过！