使用Chrome浏览器调试AngularJS应用的方法

当我们构建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：查看作用域树

有些时候，我们需要查看页面中作用域层次来有效的调试我们的应用。angularjs batarang正是我们需要的一款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一个用，我希望你能记住这些命令，并且能做到像我一样觉得他们非常实用！