如何在浏览器中调试angularjs的$rootScope对象答案

【问题标题】：how to debug the $rootScope object of angularjs in the browser如何在浏览器中调试angularjs的$rootScope对象
【发布时间】：2012-11-01 03:54:47
【问题描述】：

angularjs应用在浏览器中加载时有没有办法调试它？

即。我希望得到我当前应用程序的$rootScope。我该怎么做？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

为巴塔朗+1

此外，您可以通过从控制台执行以下命令从 DOM 中的任何元素获取范围

angular.element(DOMNODE).scope()

其中 DOMNODE 当然是对 DOM 节点的引用。

例如，在 Chrome 中的 elements 选项卡中，您可以选择 ng-app 指令所在的节点，并获取根范围

angular.element($0).scope()

【讨论】：

+1 对于选定 div 的 chrome 的 $0。您也可以将 $1, $2 用于先前选择的元素。
使用相同的选择器，您可以选择ng-app 元素，然后执行var $rootScope = angular.element($0).injector().get('$rootScope') 并使用它。
例如angular.element('body').scope();，如果您的应用是<body data-ng-app="SomeApp">
不能为此禁用 debugInfoEnabled 毫无价值。

【解决方案2】：

在开发者控制台中试试这个

$rootScope = angular.element(document).scope()

【讨论】：

【解决方案3】：

Batarang -- AngularJS 的谷歌浏览器插件

安装后就可以了

console.log($rootScope);

并在您的 chrome 控制台中检查范围对象。

顺便说一句，如果你想获得 $rootScope，你需要注入到你的控制器中

喜欢

app.controller('MainCtrl', function($scope, $rootScope) {

}

【讨论】：

【解决方案4】：

对于那些使用 $compileProvider.debugInfoEnabled(false); 和 ng-strict-di 的用户，只需将其粘贴到控制台中，$rootScope 将被记录并添加到 window：

function getRootScope($rootScope){ console.log(window.$rootScope = $rootScope); }
getRootScope.$inject = ["$rootScope"];
angular.element(document.querySelector('[data-ng-app],[ng-app]')).injector().invoke(getRootScope);

【讨论】：

这太棒了。并且可能应该被视为 Angularjs 的安全问题:)
如果 AngularJS 没有将自己暴露给窗口，这将不起作用。所以我想你可以打电话给delete window.angular，希望它不会破坏任何东西。

【解决方案5】：

你可以在你的源代码开发者工具->源代码中看到 $rootScope

【讨论】：

【解决方案6】：

在开发者控制台输入angular.element('body').scope();，如果你的应用是<body data-ng-app="SomeApp">

【讨论】：

你可以使用 '[ng-app]' 而不是 body，这样它就变得通用了

【解决方案7】：

只是想补充一下，有一个名为“Angular Scope Inspector”（current store url）的免费 Chrome 扩展程序会自动检查开发人员工具元素选项卡中选定元素的范围

我今天才发现它，它非常有用，IMO

【讨论】：