从可视元素

Question

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

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

Answer 1

<强> 1。铬

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

以下是描述和演示的链接：

Introduction of Angular JS Batarang

从此处下载Chrome插件：chrome plugin for debug AngularJS

您也可以参考以下链接：ng-book: Debugging AngularJS

您也可以使用ng-inspect进行调试角度。

<强> 2。火狐

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

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

第3。调试AngularJS ：检查链接：Debugging AngularJS

Answer 2

恕我直言，最令人沮丧的经历来自获取/设置与视觉元素相关的特定范围的值。我不仅在我自己的代码中做了很多断点，而且在angular.js本身也做了很多断点，但有时它并不是最有效的方法。虽然下面的方法非常强大，但如果你真的在生产代码中使用它们肯定被认为是不好的做法，所以明智地使用它们！

从可视元素

获取控制台中的引用

在许多非IE浏览器中，您可以通过右键单击元素并单击“Inspect Element”来选择元素。或者，您也可以单击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以及所有内容。

Answer 3

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

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

使用此＆gt; Document

Answer 4

尽管回答了这个问题，但看看ng-inspector

可能会很有趣

Answer 5

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

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

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

Answer 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;

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

Answer 7

向您打算使用它的debugger添加电话。

someFunction(){
  debugger;
}

在浏览器的网络开发者工具的console标签中，发出angular.reloadWithDebugInfo();

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

Answer 8

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

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

var scope = ele.scope();

<强>喷射器（）

var injector = ele.injector();

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

Answer 9

您可以添加＆＃39;调试器＆＃39;在您的代码中重新加载应用程序，将断点放在那里，您可以跨越＆＃39;或者跑步。

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

Answer 10

对于Visual Studio代码（非Visual Studio），请执行 Ctrl + Shift + P

在搜索栏中输入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 ===>

Answer 11

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

在浏览器中打开开发人员工具，然后转到“源”选项卡。
使用Ctrl + P打开要调试的文件并搜索文件名
在代码的左侧单击行添加断点。
刷新页面。

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

Answer 12

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

Answer 13

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

如何调试Angular JavaScript代码

13 个答案:

从可视元素

获取链接到元素的范围

$ eval是邪恶的

范围

我的控制器在哪里？