Debugging 如何调试JavaScript代码

我正在使用AngularJavaScript进行概念验证

---

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

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

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

从此处下载Chrome插件：

您还可以使用ng inspect进行调试

2。Firefox

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

也可以使用Firefox插件：（不是AngularJS团队的官方扩展）

3。调试AngularJS

---

检查链接：

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

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

---

使用此>

尽管问题已得到回答，但查看一下可能会很有趣，因为最令人沮丧的体验来自获取/设置与视觉元素相关的特定范围的值。我不仅在自己的代码中做了很多断点，而且在angular.js本身中也做了很多断点，但有时这并不是最有效的方法。 尽管下面的方法非常强大，但如果您实际在生产代码中使用，它们肯定会被认为是不好的做法，所以请明智地使用它们

从可视元素获取控制台中的引用 在许多非IE浏览器中，您可以通过右键单击元素并单击“检查元素”来选择元素。或者，您也可以单击Chrome中“元素”选项卡中的任何元素，例如。最新选定的元素将存储在控制台的变量

$0

中

获取链接到元素的范围 根据是否存在创建隔离作用域的指令，您可以通过

angular.element（$0）.scope（）

或

angular.element（$0）.isolateScope（）

（如果启用了$，请使用

$（$0）.scope（）

）检索作用域。这正是您在使用最新版本的Batarang时得到的结果。如果要直接更改值，请记住使用

scope.$digest（）

在UI上反映更改

$eval是邪恶的 不一定是为了调试<代码>范围。$eval（表达式）在您想要快速检查表达式是否具有预期值时非常方便

缺少范围的原型成员 <> >代码>范围> BLA < /C> >代码>范围。$EVAL（'BLA）是前者不考虑原型继承值。使用下面的代码片段了解整个情况（您不能直接更改值，但无论如何都可以使用

$eval

）

将其与

scopeval（$（$0.scope（））

一起使用

我的控制器在哪里？

---

有时，在编写指令时，可能需要监视

ngModel

中的值。使用

$（$0）.controller（'ngModel'）

，您将可以检查

$格式化程序

，

$解析器

，

$modelValue

，

$viewValue

$render

以及所有内容。

尝试ng inspector。从网站下载Firefox的附加组件。Firefox加载项菜单中没有该选项

-网站

-Firefox附加组件

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

范围（） 我们可以使用上的scope（）方法从元素（或其父元素）获取$scope 要素：

喷油器（）

有了这个注入器，我们就可以实例化应用程序中的任何角度对象，比如服务，

---

其他控制器或任何其他对象

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

范围更新范围值后运行摘要循环。$apply（）

为了观察$scope变量值，只需调用该变量

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

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

---

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

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

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

---

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

对于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

• 窗户

在Chrome快捷方式上单击鼠标右键，然后选择“属性” 在“目标”字段中，追加--remote debugging port=9222 或者在命令提示符下，执行/chrome.exe——远程调试端口=9222

• OSX

在终端中，执行/App

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

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

{
    "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"
        },
    ]
}

someFunction(){
  debugger;
}