在 Chrome 开发者工具中调试 AngularJS？答案

【问题标题】：Debugging AngularJS in Chrome developer tools?在 Chrome 开发者工具中调试 AngularJS？
【发布时间】：2016-02-27 05:46:25
【问题描述】：

我正在尝试在我们的应用程序中调试$http 问题，当我进入$http.get 时，调试器不会显示任何AngularJS 局部变量的值。悬停不显示任何内容，然后右键单击“在控制台中评估”会抛出 Uncaught ReferenceError: url is not defined

有没有办法在调试过程中查看AngularJS中的变量值？

谢谢。

[为布鲁诺编辑] 这是上下文丢失的代码，（angular.js（1.4.8））：

function createShortMethods(names) {
   forEach(arguments, function(name) {
      $http[name] = function(url, config) {
         return $http(extend({}, config || {}, {
            method: name,
            url: url
         }));
      };
   });
}

进入$http.get（上图）在调试器中url 和config 都没有值。 url 可能有一个值，因为 REST API 是通过网络访问的。

试过 Batarang，它不想使用 Angular 1.4.8

[更新] 看起来这与 Angular 使用严格模式有关，我将不得不解决这个问题。

感谢大家的时间和想法。

【问题讨论】：

如果您显示有问题的代码片段（控制器 + 视图），包括您设置断点的行，将更容易获得帮助。
值得怀疑，这是 Chrome 开发者工具调试器和 Angular 的问题，但你去吧。
我不关注。如果我进入 $http.get 和 url 和 config 是函数参数，我应该能够在本地（函数）上下文中检查它们的值。也就是说，url 和 config 在当前堆栈帧中。
可能重复：stackoverflow.com/questions/18782069/…
@Bruno，不是重复的，这种性质的其他 SO 问题是关于使用 Angular 调试应用程序，这个问题是关于调试 AngularJS 本身（在 AngularJS 内部）。问题是 Angular 声明了 strict ，它禁止查看 Angular 内部的局部变量。

标签： javascript angularjs google-chrome

【解决方案1】：

你可以试试AngularJS Batarang。它用于调试 Angular 应用程序。 ng-inspector for AngularJS也可以帮到你。

【讨论】：

【解决方案2】：

您可以在 $http.get(XXX) 之前添加断点，然后在 Chrome 的控制台中，您可以通过写入变量名称来检查变量。

【讨论】：

我要调试的问题是 inside Angular，我真的需要可见性。
你检查过url变量的值吗？如果你写 $http 它返回 $http 函数。