我们在构建AngularJS应用的时候，总是很难通过浏览器的JavaScript控制台(比如Chrome、Firefox、IE)访问到应用中隐藏的数据和服务。这里有一些简单的技术，可以帮助我们通过Javascript控制台查看或控制正在运行的Angular应用程序，这样就可以轻松地对应用程序进行测试、修改甚至实时修改：1。访问范围。

通过一个简单的JS程序访问页面中的任何范围(甚至是孤立的范围)！):

棱角分明。元素(targetnode)。scope()-child scope { $ id : ' 005 '，this: childscope，$ $ listeners 3360对象，$ $ listener count3360对象，$ parent: scope …}用于隔离作用域：

angular.element(targetNode)。isolateScope()-作用域{$id: '009 '，$$childTail: ChildScope，$$childHead: ChildScope，$ $ prevsibling : childscope，$ $ nextsibling 3360作用域…}这里，将“targetNode”用作HTML节点的引用。您可以通过“document.querySelector()”轻松创建目标节点

2:查看范围树

有时，我们需要查看页面中的范围级别来有效地调试我们的应用程序。AngularJS Batarang是Chrome浏览器的扩展，可以显示当前的范围级别，还有其他非常有用的功能。

3.抓住任何服务

无论在哪里定义ngApp，我们都可以使用injector函数抓取任何服务的引用(如果使用angular bootstrap方法，我们可以手动抓取$rootElement):

angular.element('html ')。注射器()。get(' my service ')-Object { undo :函数，redo:函数，_pushAction:函数，New document :函数，init :函数……}然后我们可以调用服务，就像我们可以注入服务一样。

4:访问控制器使用说明

一些指令定义了具有一些附加(通常是共享)功能的控制器。要从控制台访问给定指令的控制器实例，只需使用controller()方法：

棱角分明的最后一种方法。元素('我的页面')。controller ()-constructor {}更高级，不常用。5: Chrome控制台功能

Chrome浏览器控制台有很多调试浏览器应用程序的快捷方式。这是一些Angular开发中的最佳实践：

$0-$4:访问最近在查看窗口中选择的5个DOM元素。选择抓取范围非常方便。$(选择器)和$$(选择器):分别是querySelector()和querySelectorAll的快速替代品。感谢@zgohr提供这个方法！

结论

通过一些简单的技术，我们可以访问页面任何范围内的数据，查看范围层次结构，并注入服务和控制指令。

所以下次，如果你想做一些调整，检查你的工作或者通过控制台控制AngularJS，我希望你能记住这些命令，发现它们和我一样非常实用！