Angular调试技巧——借助chrome上的Batarang插件

序言

对于Angular初学者来说，调试Angular确实比较痛苦。一旦报错， 通常的报错的地方都是在Angular.js 内部， 其实，这只是一个表象，我们总不至于修改 Angular 官方库吧。如果仅仅是凭手动方式来调试，可调试的范围将非常有限。排查简单的错误还可以，如果是调试复杂的数据，那可麻烦了，甚至无从下手。 办法总是有的——借助第三方插件Batarang

Angular调试环境的搭建

1. 选好一个最适合调试的浏览器——chrome

我们知道，Angular 应用程序是运行在浏览器之上的，当今浏览器如此之多，那么，在哪个浏览器调试Angular最为简洁有效呢？ 当然是—— Chrome。 Chrome 本身就很强大，更何况 Angular 与 Chrome 是同一家的产品呢！

1. 下载安装 Angular调试插件——Batarang

Batarangs —— 本意是蝙蝠镖，这是蝙蝠侠最常见的工具，足见其功能之强大。 当然，咱们要做的与蝙蝠侠无关：）

Batarang 是一款专门用于Angular调试的插件，它运行在chrome 之上。那么，从哪里下载这个插件呢？
既然是Google家的产品，当然是从 Chrome 网上应用商店 下载。

在 Chrome 网上应用商店 输入 “batarang”， 页面如下：

点击“添加至CHROME”， 将自动安装到Chrome浏览器中， 安装成功后，给出如下提示：

关于 batarane的下载安装

> 如果你无法访问 Chrome 网上应用商店 ， 可以在网上搜索batarang 插件

AngularJS调试工具——batarang的使用

batarang 安装成功后，在chrome 浏览器开发工具的控制台，多了一个选项—— AngularJS 选项。 勾选“Enable”，该控件就可以使用。 如图所示：

Models

勾选左侧的 Enable， 点击 Scopes, 右侧点开 Models，如下图。 中间区域是该应用下的所有Scope的数据，右侧是Scope对应的模型（Model）信息。点击scopes作用域的某个区域，右侧相应的会显示出该作用域中的所有模型信息。

需要说明地的是：

> 有时，你会发现scopes 区域为空，这是因为你所打开的网页很有可能不是AngularJS 标准网页，或者该网页所引用的AngularJS的版本不合适。图中所展示的数据，来自点时云直播平台的网页。

注： 点时云直播平台 是一个标准的AngularJS应用程序，它所引用的AngularJS版本是1.4.6

---

Performance

Performace展示的是该应用的性能，用来显示监视遍历scope数据的变化，这个页面能帮助我们进行性能优化。

小结

要想有效调试 AngularJS， 在chrome上安装 batarang 是一个不错的选择，借助 batarang，可快速查看网页加载的所有数据，对每个节点，每个model，做到一目了然！

---

参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

---

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。