使用ng-inspector调试Angular页面

【摘要】

AngularJS是我们部门Web项目最核心最常用的前端开发框架，ng-inspector是一个Chrome扩展插件，可以实时显示scope变量，有效提高调试效率。

【正文】

安装

在Chrome应用商店中搜索ng-inspector后点击安装（需自配梯子），安装完成后会在Chrome工具栏显示相应图标

使用

在使用了AngularJS的页面，点击工具栏ng-inspector图标即可。页面右侧面板会展示scope下的所有变量，如下图，在控制器ctrl中定义了一个变量$scope.name，并把它绑定到input标签上，右侧面板把该变量值显示了出来。

当更改了input的值时，右侧面板会实时发生变化。

案例

本案例主要解决ng-if独立作用域带来的双向绑定失效，代码如下：

经测试，发现在input标签中输入新的值后，页面{{name}}处并没有随之更新，即双向绑定失效

打开ng-inspector后发现在标注为ngIf的作用域下多出了一个name变量，该变量与Input标签绑定的值一致。回顾html代码，不难发现是ng-if语句导致生成了一个新的独立作用域，在花括号中绑定的name实际上是该作用域下的一个新变量。Google后找到解决方案，把name写成对象的属性。修改后代码如下，测试通过

小结

   本文主要介绍了ng-inspector的安装和使用方法，并通过一个实例讲解如何把它应用到实际的排错中。

【摘要】

AngularJS是我们部门Web项目最核心最常用的前端开发框架，ng-inspector是一个Chrome扩展插件，可以实时显示scope变量，有效提高调试效率。

【正文】

安装

在Chrome应用商店中搜索ng-inspector后点击安装（需自配梯子），安装完成后会在Chrome工具栏显示相应图标

使用

在使用了AngularJS的页面，点击工具栏ng-inspector图标即可。页面右侧面板会展示scope下的所有变量，如下图，在控制器ctrl中定义了一个变量$scope.name，并把它绑定到input标签上，右侧面板把该变量值显示了出来。

当更改了input的值时，右侧面板会实时发生变化。

案例

本案例主要解决ng-if独立作用域带来的双向绑定失效，代码如下：

经测试，发现在input标签中输入新的值后，页面{{name}}处并没有随之更新，即双向绑定失效

打开ng-inspector后发现在标注为ngIf的作用域下多出了一个name变量，该变量与Input标签绑定的值一致。回顾html代码，不难发现是ng-if语句导致生成了一个新的独立作用域，在花括号中绑定的name实际上是该作用域下的一个新变量。Google后找到解决方案，把name写成对象的属性。修改后代码如下，测试通过

小结

   本文主要介绍了ng-inspector的安装和使用方法，并通过一个实例讲解如何把它应用到实际的排错中。