如何调试 Angular JavaScript 代码

Question

我正在使用Angular JavaScript进行概念验证。

如何在不同的浏览器（Firefox和Chrome）中调试Angular JavaScript代码？

- AskQuestion

---

AngularJS包装了许多模板代码并动态执行它们...错误的源头通常是“angular.js”，因此几乎不可能找到错误的源头。 - user3338098

Answer 1

1. Chrome

要在Chrome中调试AngularJS，您可以使用AngularJS Batarang插件。（从最近的评论来看，似乎AngularJS Batarang不再得到维护。它经过了各种版本的Chrome测试，不起作用。）

以下是描述和演示的链接： 介绍 Angular JS Batarang

从这里下载Chrome插件：用于调试AngularJS的Chrome插件

您还可以使用ng-inspect来调试angular。

2. Firefox

对于Firefox，您可以使用Firebug帮助调试代码。

还可以使用此Firefox Add-Ons：AngScope：Firefox的Add-ons（非AngularJS团队官方扩展）

3.调试AngularJS

查看链接：调试AngularJS

- Vaibhav Jain

---

真可惜它并没有真正起作用。我希望那个人能开始维护这个东西，因为它是一个很棒的想法，有很大的潜力。 - Tules

看起来Batarang已不再受支持，这个答案应该被删除。 - A F

关键在于Batarang不能帮助您调试Angular...它可以帮助您修复Angular中的错误...它绝对不是一个调试器...没有断点，也不能逐步执行代码... - Eric Brown - Cal

如何知道引发错误的确切行？它总是只在angular.js中显示错误，而不在模块或视图中。 - itsazzad

@SazzadTusharKhan：好的。试试这个->在Mac版本中，您有一个开发人员菜单（“Develop”），在Mac上，此菜单通过首选项>高级>显示开发菜单显示，并且您可以查看诸如“开始调试JavaScript”之类的项目。供您参考：https://www.youtube.com/watch?v=BUvsnDhFL2w - Vaibhav Jain

Answer 2

在我看来，最令人沮丧的体验来自于获取/设置与视觉元素相关的特定作用域的值。我不仅在自己的代码中进行了大量的断点调试，还在angular.js本身中也做了很多尝试，但有时这并不是最有效的方法。尽管以下方法非常强大，但如果实际应用于生产代码中，则肯定被认为是不好的实践，所以要明智地使用它们！

在控制台中获取视觉元素的引用

在许多非IE浏览器中，您可以通过右键单击一个元素并单击“检查元素”来选择一个元素。或者，您也可以在Chrome的Elements选项卡中单击任何元素。最后选定的元素将存储在控制台中的变量$0中。

获取与元素相关联的作用域

这取决于是否存在创建隔离作用域的指令，您可以通过angular.element($0).scope()或angular.element($0).isolateScope()（如果启用了$，则使用$($0).scope()）来检索作用域。这正是您在使用最新版本的Batarang时获得的内容。如果您直接更改值，请记得使用scope.$digest()来反映UI上的更改。

$eval很邪恶

对于调试而言不一定如此。scope.$eval(expression)非常方便，当您想快速检查表达式是否具有预期值时可以使用。

作用域的缺失原型成员

scope.bla和scope.$eval('bla')之间的区别在于前者不考虑原型继承的值。使用下面的代码片段可以获得全貌（您不能直接更改该值，但无论如何都可以使用$eval！）

scopeCopy = function (scope) {
    var a = {}; 
    for (x in scope){ 
        if (scope.hasOwnProperty(x) && 
            x.substring(0,1) !== '$' && 
            x !== 'this') {
            a[x] = angular.copy(scope[x])
        }
    }
    return a
};

scopeEval = function (scope) {
    if (scope.$parent === null) {
        return hoho(scope)
    } else {
        return angular.extend({}, haha(scope.$parent), hoho(scope))
    }
};

使用 scopeEval($($0).scope())。

我的控制器在哪里？

有时您编写指令时可能想要监视ngModel中的值。使用$($0).controller('ngModel')，您将可以检查$formatters、$parsers、$modelValue、$viewValue、$render以及所有其他内容。

- Osbert Ngok

Answer 3

还有 $log 可以使用！它以你想要的方式利用你的控制台工作！

以通常控制台显示错误/警告/信息的方式显示它们！

使用此 > 文档

- Ali RAN

---

链接已损坏。 - Reinstate Monica -- notmaynard

Answer 4

虽然问题已经得到了回答，但看一下ng-inspector可能会有趣。

- Iker Aguayo

---

我并不认为AngularJS Batarang很有用，但ng-inspector似乎工作得不错。 - MartyIX

不再支持Chrome浏览器 - run_the_race

Answer 5

不幸的是，大多数插件和浏览器扩展程序只能向您显示值，但它们不允许您编辑范围变量或运行Angular函数。如果您想在浏览器控制台（在所有浏览器中）更改$scope变量，则可以使用jQuery。如果在AngularJS之前加载jQuery，则可以将angular.element传递给jQuery选择器。因此，您可以使用以下方法检查控制器的作用域：

angular.element('[ng-controller="name of your controller"]').scope()

例子： 您需要更改$scope变量的值并在浏览器中查看结果，然后只需在浏览器控制台中键入：

angular.element('[ng-controller="mycontroller"]').scope().var1 = "New Value";
angular.element('[ng-controller="mycontroller"]').scope().$apply();

您可以立即在浏览器中看到更改。我们使用$apply()的原因是：任何在angular上下文之外更新的作用域变量都不会更新其绑定，您需要在使用scope更新作用域值后运行digest周期，使用scope.$apply()。

要观察$scope变量值，只需调用该变量。

示例： 如果您想在Chrome或Firefox的Web控制台中查看$scope.var1的值，请键入：

angular.element('[ng-controller="mycontroller"]').scope().var1;

结果将立即显示在控制台中。

- Iman Sedighi

Answer 6

请尝试使用ng-inspector。您可以从网站http://ng-inspector.org/下载Firefox的插件。请注意，它不在Firefox的插件菜单中显示。 http://ng-inspector.org/ - 网站 http://ng-inspector.org/ng-inspector.xpi - Firefox插件

- Aakash

---

不再支持 Chrome。 - run_the_race

Answer 7

在您想要使用调试器的地方添加debugger调用。

someFunction(){
  debugger;
}

在浏览器的Web开发工具的控制台选项卡中，输入angular.reloadWithDebugInfo(); 访问或重新加载您想要调试的页面，然后在浏览器中查看调试器。

- Tass

---

由于某些原因，这似乎在组件内部无法正常工作。控制台似乎会在创建组件的位置定位断点，但不会显示实际执行的代码。至少对我来说是这样的。尽管您可以查看范围内的变量值。如果有人知道如何让调试器显示正在步进的实际代码，将不胜感激。 - GGizmos

Answer 8

var rootEle = document.querySelector("html");
var ele = angular.element(rootEle); 

scope() 我们可以通过在元素上使用scope()方法（或其父级）来获取$scope：

var scope = ele.scope();

injector()

var injector = ele.injector();

使用这个注入器，我们可以在应用程序中实例化任何 Angular 对象，例如服务、其他控制器或任何其他对象。

- zloctb

---

谢谢。正是我所需要的！ - marlar

Answer 9

你可以在代码中添加“debugger”关键字，然后重新加载应用程序，在那里设置断点。你可以使用“步过”或运行来调试代码。请注意保留HTML标签。

var service = {
user_id: null,
getCurrentUser: function() {
  debugger; // Set the debugger inside 
            // this function
  return service.user_id;
}

- Rk R Bairi

Answer 10

您可以使用浏览器内置的开发者工具进行调试。

1. 在浏览器中打开开发者工具并转到源代码选项卡。

2. 使用Ctrl+P打开要调试的文件并搜索文件名

3. 通过单击代码左侧添加断点。

4. 刷新页面。

有许多插件可用于调试，您可以参考使用Chrome插件“Debugger for chrome”插件调试Angular应用程序。

- Dharmaraj Kavatagi