如何调试 Angular JavaScript 代码

Posted

技术标签:

【中文标题】如何调试 Angular JavaScript 代码【英文标题】：How to debug Angular JavaScript Code 【发布时间】：2013-09-17 21:22:40 【问题描述】：

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

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

【问题讨论】：

呃 angularjs 包装了很多模板代码并动态执行它...错误的来源始终是“angular.js”，因此几乎不可能找到错误的来源。 【参考方案1】：

1.铬

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

这里是描述和演示的链接： Introduction of Angular JS Batarang

从这里下载 Chrome 插件：Chrome plugin for debugging AngularJS

你也可以使用 ng-inspect 来调试 Angular。

2。火狐

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

也可以使用这个 Firefox 附加组件：AngScope: Add-ons for Firefox（不是 AngularJS 团队的官方扩展）

3.调试 AngularJS

查看链接：Debugging AngularJS

【讨论】：

很遗憾它并没有真正起作用。我希望这家伙能开始维护这件事，因为这是个好主意，而且有很大的潜力 @AskQuestion 看起来 Batarang 不再受支持。这个答案应该被删除 Angular 团队（主要是@btford）仍然支持 Batarang，但它似乎不是他们列表中的优先事项，因为他们都是下一个 AngularJS 2.0 版本的负责人。如果 Batarang 让您头疼，请查看 ng-inspect。 假设batarang工作正常，控制台中的angular.js错误没有添加额外的上下文，'AngularJS'选项卡也没有帮助。 @SazzadTusharKhan：好的。试试这个 -> 在 mac 版本上你有一个开发者菜单（“开发”），在 mac 这个菜单通过首选项 > 高级 > 显示开发菜单显示，在那里你可以查看诸如“开始调试 javascript”之类的项目。供您参考：youtube.com/watch?v=BUvsnDhFL2w【参考方案2】：

恕我直言，最令人沮丧的体验来自获取/设置与视觉元素相关的特定范围的值。我不仅在我自己的代码中，还在 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') 的区别在于前者不考虑原型继承的值。使用下面的sn-p可以得到全图（不能直接改数值，不过可以用$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 和所有内容。

【讨论】：

【参考方案3】：

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

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

使用这个>Document

【讨论】：

链接已损坏。【参考方案4】：

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

【讨论】：

我不觉得 AngularJS Batarang 有用，不过 ng-inspector 似乎工作得很好。【参考方案5】：

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

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

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

【讨论】：

【参考方案6】：

不幸的是，大多数附加组件和浏览器扩展只是向您显示值，但它们不允许您编辑范围变量或运行角度函数。如果您想更改浏览器控制台（在所有浏览器中）中的 $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;

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

【讨论】：

【参考方案7】：

将呼叫添加到您打算使用它的debugger。

someFunction()
  debugger;

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

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

【讨论】：

由于某种原因，这似乎在组件内部不起作用。控制台似乎在创建组件的点定位断点，但不会显示实际执行的代码。至少对我来说不是。尽管您可以查看范围内的变量的值。如果有人知道如何让调试器显示正在逐步执行的实际代码，我们将不胜感激。【参考方案8】： 
var rootEle = document.querySelector("html");
var ele = angular.element(rootEle);

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

var scope = ele.scope();

injector()

var injector = ele.injector();

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

【讨论】：

谢谢。正是我需要的！【参考方案9】：

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

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

【讨论】：

【参考方案10】：

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

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

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

    在代码左侧单击的行上添加断点。

    刷新页面。

有很多可调试的插件可以参考使用chrome插件Debug Angular Application using "Debugger for chrome" plugin

【讨论】：

【参考方案11】：

对于 Visual Studio 代码（不是 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

OS X

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

Linux

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

Find More ===>

【讨论】：

【参考方案12】：

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

【讨论】：

【参考方案13】：

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

【讨论】：

以上是关于如何调试 Angular JavaScript 代码的主要内容，如果未能解决你的问题，请参考以下文章

如何调试 Angular 通用？

如何使用 VSCode 调试 Angular？

如何从 VS Code 调试 Angular 6 子项目

如何使用 Visual Studio Code 调试 Angular Schematics 实现

C线程代业代写代调试POSIX Threads代编码

如何使用 Visual Studio Code 中的 Electron 和 Angular 调试应用程序？