AngularJS如何在控制台中调试错误

当我们编写AngularJS应用程序时，通过Chrome、Firefox和IE的JavaScript控制台获取隐藏在应用程序中的数据和服务是一项非常具有挑战性的任务。这里有一些简单的提示，可以帮助我们使用Javascript控制台监控正在运行的Angular应用程序，使实时测试、修改甚至编写Angular应用程序变得更加容易。

13360获取示波器。

我们可以使用一行JS代码来获得任何作用域(甚至是隔离的作用域):

复制的代码如下： angular . element(target node)。scope()-child scope { $ id : ' 005 '，this:childscope，$ $ listeners 3360object，$ $ listener count3360object，$ parent:scope.}

或者隔离范围：

复制的代码如下： angular . element(target node)。isolatescope()-作用域{$ id:' 009 '，$ $ childtail3360childscope，$ $ childhead:childscope，$ $ prevsibling3360childscope，$ $ nextsibling 3360scope.

在这种情况下，targetNode指的是html节点。您可以很容易地使用document.querySelector()来获取它。

23360监视器范围树。

为了更好地调试我们的应用程序，有时我们需要查看页面上Scope的结构。此时，我们需要使用两个Chrome浏览器扩展，AngularJSBaratang和ng-inspector，来帮助我们实时查看Scope。此外，这两个扩展还有一些其他非常有用的功能。

(1).AngularJS Baratang

(2).ng-检查员

:抓取服务。

我们可以使用定义ngApp元素的注入器函数来抓取任何服务，或者通过任何带有ng-scope类的元素间接获取服务。

复制代码如下： angular . element(document . queryselector(' html ')。注射器()。get(' my service ')-object { undo 3360 function，redo 3360function，_pushAction: function，newDocument: function，init: function…}//或者稍微通用一点的angular . element(document . queryselector(')。ng-scope’)。注射器()。获取('我的服务')

接下来，我们可以像在程序中注入后一样使用相关的服务。

43360从指令中获取控制器。

有一些指令将特定的(通常是共享的)功能定义为控制器。为了获得一个从控制台指定指令的控制器的例子，我们只需要使用controller()函数。

复制的代码如下：angular.element ('my-pages ')。controller()-构造函数{}。

最后一个不常用，属于比较高级的技能。

5: Chrome控制台功能。

Chrome有许多非常有用的快捷命令，用于在控制台中调试web应用程序。以下是一些对角度开发最有帮助的命令：

$0-$4:获取inst胸针窗口中的最后5个DOM元素。这个快捷方式可以帮助我们抓取scopes(scope): angular . element($ 0)。所选元素的作用域()非常方便。

$(选择器)和$$(选择器):可以方便地替代querySelector()和querySelectorAll。

感谢@zgohr的这篇提示！

摘要

通过这些简单的技巧，我们可以获取任何范围内的数据，监控范围的层次结构，注入服务和控制指令。

所以下次，当你想做一些微调，检查代码或从控制台控制一个AngularJS应用程序时，我希望你能像我一样记住这些提示，并更多地使用它们。

查看更多AngularJS语法，可以关注：AngularJS参考手册英文版，希望大家多多支持。