我们在构建AngularJS应用时，总是很难通过浏览器（如Chrome、Firefox、IE）的JavaScript控制台访问到应用中隐藏的数据和服务。这里有一些简单的技巧，可以帮助我们通过Javascript控制台查看或控制正在运行的Angular应用程序，让应用程序更容易测试、修改，甚至实时修改我们的Angular应用程序：1：访问范围就这么简单一行JS程序访问页面中的任何范围（甚至是孤立的范围！）：>angular.element(targetNode).scope()->ChildScope{$id:"005",this:ChildScope,$$listeners:Object,$$listenerCount:Object,$parent:Scope…}对于隔离作用域：>angular.element(targetNode).isolateScope()->Scope{$id:"009",$$childTail:ChildScope,$$childHead:ChildScope,$$prevSibling:ChildScope,$$nextSibling:Scope...}这里，`targetNode`用作对HTML节点的引用。您可以通过`document.querySelector()`轻松创建一个`targetNode`2：查看作用域树有时，我们需要在页面中查看作用域层次结构以有效地调试我们的应用程序。AngularJSBatarang正是我们需要的Chrome浏览器扩展程序，它可以显示当前范围层次结构并具有其他非常有用的功能。3：抓取任意服务无论ngApp定义在哪里，我们都可以使用注入器函数来抓取任意服务的引用（如果使用angular的bootstrap方法，可以手动抓取$rootElement）：>angular.element('html').injector().get('MyService')->Object{undo:function,redo:function,_pushAction:function,newDocument:function,init:function…}然后我们可以调用服务，就像我们可以注入服务一样。4：访问控制器使用指令一些指令定义了一个具有一些附加（通常是共享）功能的控制器。为了从控制台访问给定指令的控制器实例，只需使用controller()方法：>angular.element('my-pages').controller()->Constructor{}***更高级的方法而且不常用。5：Chrome控制台功能Chrome的控制台有很多用于调试浏览器应用程序的快捷方式。以下是Angular开发中的一些最佳实践：$0-$4：访问查看器中最近选择的5个DOM元素。选择要抓取的范围非常方便。$(selector)和$$(selector)：分别是querySelector()和querySelectorAll的快速替代方法感谢@zgohr的这种方法！结论通过一些简单的技巧，我们可以访问页面任何范围内的数据、查看范围层次结构、注入服务和控制指令。所以下次，如果你想稍微调整一下，检查你的工作或通过控制台控制AngularJS应用程序，我希望你记住这些命令并发现它们和我一样有用！英文原文：DebuggingAngularJSAppsfromtheConsole翻译自：http://www.oschina.net/translate/angularjs-console
