106

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

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

4

13 回答 13

69

1.铬

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

这是描述和演示的链接： Angular JS Batarang 简介

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

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

2.火狐

对于Firefox ，您可以在Firebug的帮助下调试代码。

也使用这个 Firefox 附加组件：AngScope：Firefox 附加组件（不是 AngularJS 团队的官方扩展）

3.调试AngularJS

检查链接：调试 AngularJS

于 2013-09-13T08:52:59.160 回答
37

恕我直言，最令人沮丧的体验来自获取/设置与视觉元素相关的特定范围的值。我不仅在我自己的代码中，还在 angular.js 本身中做了很多断点，但有时它根本不是最有效的方法。尽管下面的方法非常强大，但如果您实际在生产代码中使用它们肯定会被认为是不好的做法，因此请明智地使用它们！

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

在许多非 IE 浏览器中，您可以通过右键单击元素并单击“检查元素”来选择元素。或者，您也可以单击 Chrome 中元素选项卡中的任何元素，例如。最新选择的元素将存储$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所有内容。

于 2015-03-23T11:23:43.777 回答
13

您还可以使用 $log ！它以您希望它工作的方式使用您的控制台！

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

使用这个 >文档

于 2013-12-19T05:47:03.337 回答
10

尽管问题已得到解答，但看看ng-inspector可能会很有趣

于 2015-01-20T09:28:34.657 回答
7

不幸的是，大多数附加组件和浏览器扩展只是向您显示值，但它们不允许您编辑范围变量或运行角度函数。如果您想更改浏览器控制台中的 $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() 的原因是：任何从外部角度上下文更新的范围变量都不会更新它的绑定，您需要在使用scope.$apply().

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

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

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

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

于 2015-12-08T05:55:30.477 回答
7

试试 ng-inspector。从网站http://ng-inspector.org/下载 Firefox 插件。它在 Firefox 添加菜单上不可用。

http://ng-inspector.org/ - 网站

http://ng-inspector.org/ng-inspector.xpi - Firefox 插件</p>

于 2015-08-22T12:38:07.667 回答
5

将调用添加到debugger您打算使用它的位置。

someFunction(){
  debugger;
}

在console浏览器的 Web 开发人员工具选项卡中，发出angular.reloadWithDebugInfo();

访问或重新加载您要调试的页面，并看到调试器出现在您的浏览器中。

于 2016-11-08T17:08:44.263 回答
3 
var rootEle = document.querySelector("html");
var ele = angular.element(rootEle);

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

var scope = ele.scope();

注射器（）

var injector = ele.injector();

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

于 2015-09-07T09:56:01.590 回答
2

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

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

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

  3. 在代码左侧的一行上添加断点。

  4. 刷新页面。

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

于 2018-07-19T19:05:47.693 回答
2

您可以在代码中添加“调试器”并重新加载应用程序，将断点放在那里，您可以“跳过”或运行。

var service = {
user_id: null,
getCurrentUser: function() {
  debugger; // Set the debugger inside 
            // this function
  return service.user_id;
}
于 2016-01-13T17:34:55.617 回答
1

对于 Visual Studio Code（不是 Visual Studio）做 Ctrl+ Shift+P

在搜索栏中输入 Debugger for Chrome，安装并启用它。

在您的launch.json文件中添加此配置：

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceRoot}/app/files",
            "sourceMaps": true
        },
        {
            "name": "Launch index.html (without sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

您必须在启用远程调试的情况下启动 Chrome，才能将扩展附加到它。

  • 视窗

右键单击 Chrome 快捷方式，然后选择属性 在“目标”字段中，附加 --remote-debugging-port=9222 或在命令提示符下，执行 /chrome.exe --remote-debugging-port=9222

  • 操作系统

在终端中，执行 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

  • Linux

在终端中，启动 google-chrome --remote-debugging-port=9222

查找更多 ===>

于 2016-07-30T14:13:28.653 回答
0

也许你可以使用Angular Augury一个谷歌 Chrome 开发工具扩展来调试 Angular 2 及更高版本的应用程序。

于 2017-11-07T18:24:43.030 回答
0

由于附加组件不再起作用，我发现的最有用的工具集是使用 Visual Studio/IE，因为您可以在 JS 中设置断点并以这种方式检查数据。当然，Chrome 和 Firefox 通常拥有更好的开发工具。此外，好的 ol'console.log() 非常有帮助！

于 2016-02-02T20:54:14.953 回答