序言
对于Angular初学者来说,调试Angular确实比较痛苦。一旦报错, 通常的报错的地方都是在Angular.js 内部, 其实,这只是一个表象,我们总不至于修改 Angular 官方库吧。如果仅仅是凭手动方式来调试,可调试的范围将非常有限。排查简单的错误还可以,如果是调试复杂的数据,那可麻烦了,甚至无从下手。 办法总是有的——借助第三方插件Batarang
Angular调试环境的搭建
- 选好一个最适合调试的浏览器——chrome
我们知道,Angular 应用程序是运行在浏览器之上的,当今浏览器如此之多,那么,在哪个浏览器调试Angular最为简洁有效呢? 当然是—— Chrome。 Chrome 本身就很强大,更何况 Angular 与 Chrome 是同一家的产品呢!
- 下载安装 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 准时推送技术文章。