本文翻译自：How do I access the $scope variable in browser's console using AngularJS?
I would like to access my $scope variable in Chrome's JavaScript console. 我想在Chrome的JavaScript控制台中访问$scope变量。 How do I do that? 我怎么做？
I can neither see $scope nor the name of my module myapp in the console as variables. 我既看不到$scope也看不见控制台中我的模块myapp的名称作为变量。
#1楼
参考：https://stackoom.com/question/vfCE/如何使用AngularJS在浏览器的控制台中访问-scope变量
#2楼
Pick an element in the HTML panel of the developer tools and type this in the console: 在开发人员工具的HTML面板中选择一个元素，然后在控制台中输入以下元素：
angular.element($0).scope()
In WebKit and Firefox, $0 is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console. 在WebKit和Firefox中， $0是对elements选项卡中所选DOM节点的引用，因此通过执行此操作，可以在控制台中打印出所选DOM节点范围。
You can also target the scope by element ID, like so: 您还可以按元素ID定位作用域，如下所示：
angular.element(document.getElementById('yourElementId')).scope()
Addons/Extensions 插件/扩展
There are some very useful Chrome extensions that you might want to check out: 您可能需要检查一些非常有用的Chrome扩展程序：
ng-inspector . ng-inspector 。 This is the newest one, and as the name suggests, it allows you to inspect your application's scopes. 这是最新的，顾名思义，它使您可以检查应用程序的范围。
扫描二维码关注公众号，回复： 10405587 查看本文章
Playing with jsFiddle 玩jsFiddle
When working with jsfiddle you can open the fiddle in show mode by adding /show at the end of the URL. 使用jsfiddle时，您可以在显示模式下通过在URL末尾添加/show打开小提琴。 When running like this you have access to the angular global. 像这样运行时，您可以访问angular全局。 You can try it here: 您可以在这里尝试：
http://jsfiddle.net/jaimem/Yatbt/show http://jsfiddle.net/jaimem/Yatbt/show
jQuery Lite jQuery Lite
If you load jQuery before AngularJS, angular.element can be passed a jQuery selector. 如果您在AngularJS之前加载jQuery， angular.element可以向angular.element传递jQuery选择器。 So you could inspect the scope of a controller with 因此，您可以使用以下命令检查控制器的范围
angular.element('[ng-controller=ctrl]').scope()
Of a button 一个按钮
angular.element('button:eq(1)').scope()
... and so on. ... 等等。
You might actually want to use a global function to make it easier: 您实际上可能希望使用全局函数使其变得更容易：
window.SC = function(selector){
return angular.element(selector).scope();
};
Now you could do this 现在您可以执行此操作
SC('button:eq(10)')
SC('button:eq(10)').row // -> value of scope.row
Check here: http://jsfiddle.net/jaimem/DvRaR/1/show/ 在这里检查： http : //jsfiddle.net/jaimem/DvRaR/1/show/
#3楼
Somewhere in your controller (often the last line is a good place), put 在控制器中的某个位置（通常最后一行是一个好地方），放在
console.log($scope);
If you want to see an inner/implicit scope, say inside an ng-repeat, something like this will work. 如果要查看内部/隐式作用域，例如在ng-repeat内，则可以使用类似的方法。
<li ng-repeat="item in items">
...
<a ng-click="showScope($event)">show scope</a>
</li>
Then in your controller 然后在您的控制器中
function MyCtrl($scope) {
...
$scope.showScope = function(e) {
console.log(angular.element(e.srcElement).scope());
}
}
Note that above we define the showScope() function in the parent scope, but that's okay... the child/inner/implicit scope can access that function, which then prints out the scope based on the event, and hence the scope associated with the element that fired the event. 请注意，上面我们在父作用域中定义了showScope（）函数，但这没关系...子/内部/隐式作用域可以访问该函数，然后该函数根据事件打印出作用域，从而与之关联的作用域触发事件的元素。
@jm-'s suggestion also works, but I don't think it works inside a jsFiddle. @ jm-的建议也可以， 但是我认为它在jsFiddle内部不起作用。 I get this error on jsFiddle inside Chrome: 我在Chrome内的jsFiddle上收到此错误：
> angular.element($0).scope() ReferenceError: angular is not defined
#4楼
To improve on jm's answer... 为了改善jm的答案...
// Access whole scope
angular.element(myDomElement).scope();
// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);
// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();
Or if you're using jQuery, this does the same thing... 或者，如果您使用的是jQuery，则可以执行相同的操作...
$('#elementId').scope();
$('#elementId').scope().$apply();
Another easy way to access a DOM element from the console (as jm mentioned) is to click on it in the 'elements' tab, and it automatically gets stored as $0 . 从控制台访问DOM元素的另一种简单方法（如jm所述）是在“元素”选项卡中单击它，它会自动存储为$0 。
angular.element($0).scope();
#5楼
If you have installed Batarang 如果您已经安装了Batarang
Then you can just write: 然后，您可以编写：
$scope
when you have the element selected in the elements view in chrome. 当您在Chrome元素视图中选择了元素时。 Ref - https://github.com/angular/angularjs-batarang#console 参考-https: //github.com/angular/angularjs-batarang#console
#6楼
I agree the best is Batarang with it's $scope after selecting an object (it's the same as angular.element($0).scope() or even shorter with jQuery: $($0).scope() (my favorite)) 我同意最好的是选择对象后angular.element($0).scope()的$scope （与angular.element($0).scope()或者甚至比jQuery更短： $($0).scope() （我最喜欢））
Also, if like me you have you main scope on the body element, a $('body').scope() works fine. 另外，如果像我一样，您将主体范围设置在body元素上，则$('body').scope()可以正常工作。
