如何在浏览器中调试角度服务答案

【问题标题】：how to debug angular services in browser如何在浏览器中调试角度服务
【发布时间】：2013-01-11 12:36:32
【问题描述】：

我在我的 Angular 应用程序中创建了一个工厂/服务。

我想在浏览器中调试它。有没有办法可以访问它的实例并检查它的函数和变量的值是什么。

可以使用

访问角度范围

angular.element(e).scope()

有没有类似的方式访问工厂？

【问题讨论】：

标签： angularjs

【解决方案1】：

我相信你可以使用这样的东西：

angular.element(e).injector().get('serviceName')

由于 angularjs 服务是singletons，因此在任何 angular.element 上执行此操作将始终返回相同的服务实例/对象。

【讨论】：

+1 这很棒。有了这个，调试就容易多了。添加指向 Angular 文档的链接将进一步改进该实用程序。参考：docs.angularjs.org/api/angular.element
这仍然有效吗？它以前工作正常。但现在它说ReferenceError: e is not defined
@IvanWang 是的，它仍然有效。刚刚测试，它的工作。您确定 e 变量已定义并可访问吗？（会不会是this之类的问题？）
@bmleite 这可能是原因。请告诉我如何在 AngularJs 中定义e？
在 Chrome 中，您可以在元素选项卡中选择一个元素并使用 $0 引用它。所以你可以选择你的主控制器元素，使用angular.element($0).injector().get('serviceName')

【解决方案2】：

将您的服务注入任何控制器，然后console.log(myService);

【讨论】：

【解决方案3】：

就像@bmleite 说的，你可以使用：

angular.element( {DOM element} ).injector().get('serviceName')

您可以选择想要的 DOM 元素（使用 Chrome 开发者工具上的“元素”选项卡或 Firefox/Firebug 上的“HTML”选项卡），然后在“控制台”选项卡中使用 $0 指向它。

要选择的最简单的元素是您有 ngApp 指令的元素。最终代码为：

var myService = angular.element($0).injector().get('serviceName');

那么你就可以访问他所有的变量和函数了：

myService.getConfig('dev');

【讨论】：

【解决方案4】：

试试ng-inspect chrome 扩展。

$get('serviceName') 在控制台中将返回服务或工厂实例。

【讨论】：

【解决方案5】：

我不确定它如何检查服务，但 Angular Batarang 是一个用于调试 Angular 应用程序的出色 Chrome 扩展。可能会有所帮助。

Batarang 的有用文档：

【讨论】：