我正在使用 Angular JavaScript 进行概念验证。
如何在不同的浏览器（Firefox 和 Chrome）中调试 Angular JavaScript 代码？
【问题讨论】：
标签： debugging google-chrome firefox angularjs browser
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
【讨论】：
ng-inspect。
恕我直言，最令人沮丧的体验来自获取/设置与视觉元素相关的特定范围的值。我不仅在我自己的代码中，还在 angular.js 本身中做了很多断点，但有时它根本不是最有效的方法。 虽然下面的方法非常强大，但如果你真的在生产代码中使用它们肯定会被认为是不好的做法，所以要明智地使用它们！
在许多非 IE 浏览器中，您可以通过右键单击元素并单击“检查元素”来选择元素。或者，您也可以单击 Chrome 中元素选项卡中的任何元素，例如。最新选择的元素将存储在控制台中的变量$0 中。
根据是否存在创建隔离作用域的指令，您可以通过angular.element($0).scope() 或angular.element($0).isolateScope() 检索作用域（如果启用了$，则使用$($0).scope()）。这正是您在使用最新版本的 Batarang 时所得到的。如果您直接更改值，请记住使用scope.$digest() 将更改反映在 UI 上。
不一定用于调试。 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 和所有内容。
【讨论】：
【讨论】：
尽管问题已得到解答，但看看ng-inspector 可能会很有趣
【讨论】：
试试 ng-inspector。从网站http://ng-inspector.org/ 下载 Firefox 插件。它在 Firefox 附加菜单上不可用。
http://ng-inspector.org/ng-inspector.xpi - Firefox 插件
【讨论】：
不幸的是，大多数附加组件和浏览器扩展只是向您显示值，但它们不允许您编辑范围变量或运行角度函数。如果您想更改浏览器控制台（在所有浏览器中）中的 $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;
结果将立即显示在控制台中。
【讨论】：
将呼叫添加到您打算使用它的debugger。
someFunction(){
debugger;
}
在浏览器的 Web 开发人员工具的 console 选项卡中，发出 angular.reloadWithDebugInfo();
访问或重新加载您要调试的页面，并看到调试器出现在您的浏览器中。
【讨论】：
var rootEle = document.querySelector("html");
var ele = angular.element(rootEle);
范围（） 我们可以通过使用 scope() 方法从元素（或其父元素）获取 $scope 元素：
var scope = ele.scope();
injector()
var injector = ele.injector();
使用这个注入器，我们可以在我们的应用程序中实例化任何 Angular 对象，例如服务， 其他控制器，或任何其他对象
【讨论】：
您可以在代码中添加“调试器”并重新加载应用程序，这会将断点放在那里，您可以“跳过”或运行。
var service = {
user_id: null,
getCurrentUser: function() {
debugger; // Set the debugger inside
// this function
return service.user_id;
}
【讨论】：
您可以使用开发人员工具中内置的浏览器进行调试。
在浏览器中打开开发者工具并转到源选项卡。
使用Ctrl+P打开你要调试的文件并搜索文件名
在代码左侧单击的行上添加断点。
刷新页面。
有很多可调试的插件可以参考使用chrome插件Debug Angular Application using "Debugger for chrome" plugin
【讨论】：
对于 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
在终端中，执行 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
在终端中，启动 google-chrome --remote-debugging-port=9222
【讨论】：
由于附加组件不再起作用，我发现最有用的工具集是使用 Visual Studio/IE，因为您可以在 JS 中设置断点并以这种方式检查数据。当然，Chrome 和 Firefox 通常拥有更好的开发工具。此外，好的 ol'console.log() 非常有帮助！
【讨论】：
也许您可以使用 Angular Augury 一个 Google Chrome 开发工具扩展来调试 Angular 2 及更高版本的应用程序。
【讨论】：