如何调试Angular JavaScript代码

Question

我正在使用Angular JavaScript进行概念验证.

如何在不同的浏览器(Firefox和Chrome)中调试Angular JavaScript代码？

Answer 1

1. Chrome

对于chrome中的 Debug AngularJS,您可以使用AngularJS Batarang.(从最近对插件的评论来看,似乎不再维护AngularJS Batarang.在各种版本的chrome中测试不起作用)

这是描述和演示的链接:

Angular JS Batarang简介

从这里下载chrome插件:用于调试AngularJS的chrome插件

您也可以参考以下链接:ng-book:调试AngularJS

您也可以使用ng-inspect来调试角度.

2. Firefox

对于Firefox,在Firebug的帮助下,您可以调试代码.

也可以使用这个Firefox附加组件:AngScope:Firefox附加组件(不是AngularJS团队的官方扩展)

3.调试AngularJS:检查链接:调试AngularJS

Answer 2

恕我直言,最令人沮丧的经历来自获取/设置与视觉元素相关的特定范围的值.我不仅在我自己的代码中做了很多断点,而且在angular.js本身也做了很多断点,但有时它并不是最有效的方法.虽然下面的方法非常强大,但如果你真的在生产代码中使用它们肯定被认为是不好的做法,所以明智地使用它们!

从可视元素中获取控制台中的引用

在许多非IE浏览器中,您可以通过右键单击元素并单击"Inspect Element"来选择元素.或者,您也可以单击Chrome中"元素"选项卡中的任何元素.最新选择的元素将存储$0在控制台中的变量中.

获取链接到元素的范围

根据是否存在创建隔离范围的指令,您可以通过angular.element($0).scope()或检索范围angular.element($0).isolateScope()($($0).scope()如果启用了$,则使用).这正是您使用最新版本的Batarang时所获得的.如果要直接更改值,请记住使用scope.$digest()以反映UI上的更改.

$ eval是邪恶的

不一定用于调试.scope.$eval(expression)如果要快速检查表达式是否具有预期值,则非常方便.

缺少原型成员的范围

scope.bla和之间的区别scope.$eval('bla')是前者不考虑原型继承的值.使用下面的代码片段来了解整个情况(您无法直接更改值,但$eval无论如何都可以使用!)

scopeCopy = function (scope) {
    var a = {}; 
    for (x in scope){ 
        if (scope.hasOwnProperty(x) && 
            x.substring(0,1) !== '$' && 
            x !== 'this') {
            a[x] = angular.copy(scope[x])
        }
    }
    return a
};

scopeEval = function (scope) {
    if (scope.$parent === null) {
        return hoho(scope)
    } else {
        return angular.extend({}, haha(scope.$parent), hoho(scope))
    }
};

使用它scopeEval($($0).scope()).

我的控制器在哪里？

有时您可能希望在ngModel编写指令时监视值.使用$($0).controller('ngModel'),你会得到检查$formatters,$parsers,$modelValue,$viewValue $render和一切.

Answer 3

你也可以使用$ log!它以您希望它的工作方式使用您的控制台!

以您的控制台正常显示的方式显示错误/警告/信息!

使用此> 文档

Answer 4

尽管问题得到了回答,但看看ng-inspector可能会很有趣

Answer 5

试试ng-inspector.从网站http://ng-inspector.org/下载Firefox附加组件.它在Firefox添加菜单上不可用.

http://ng-inspector.org/ - 网站

http://ng-inspector.org/ng-inspector.xpi - Firefox附加组件

Answer 6

不幸的是,大多数附加组件和浏览器扩展只是向您显示值,但它们不允许您编辑范围变量或运行角度函数.如果你想在浏览器控制台(在所有浏览器中)更改$ scope变量,那么你可以使用jquery.如果在AngularJS之前加载jQuery,则可以将angular.element传递给jQuery选择器.所以你可以检查一下控制器的范围

angular.element('[ng-controller="name of your controller"]').scope()

示例: 您需要更改$ scope变量的值并在浏览器中查看结果,然后只需键入浏览器控制台:

angular.element('[ng-controller="mycontroller"]').scope().var1 = "New Value";
angular.element('[ng-controller="mycontroller"]').scope().$apply();

您可以立即在浏览器中查看更改.我们使用$ apply()的原因是:从外部角度上下文更新的任何范围变量都不会更新它的绑定,您需要在更新范围值后运行摘要周期scope.$apply().

要观察$ scope变量值,您只需要调用该变量.

示例: 您想在Chrome或Firefox的Web控制台中看到$ scope.var1的值,只需键入:

angular.element('[ng-controller="mycontroller"]').scope().var1;

结果将立即显示在控制台中.

Answer 7

将呼叫添加到debugger您打算使用它的地方。

someFunction(){
  debugger;
}

在console浏览器的Web开发人员工具的标签中，发出angular.reloadWithDebugInfo();

访问或重新加载要调试的页面，然后看到调试器出现在浏览器中。