Answers:
1.镀铬
对于chrome中的 AngularJS调试，您可以使用AngularJS Batarang。（从最近对该插件的评论来看，似乎不再维护AngularJS Batarang。在各种版本的chrome中进行测试均无法正常工作）
这是描述和演示的链接：
从此处下载chrome插件：用于调试AngularJS的chrome插件
您也可以参考此链接：ng-book：调试AngularJS
您也可以使用ng-inspect调试angular。
2.火狐
对于使用Firebug的Firefox，您可以调试代码。
还要使用此Firefox附加组件：AngScope：Firefox附加组件（不是AngularJS团队的官方扩展）
3.调试AngularJS：检查链接：调试AngularJS
ng-inspectBatarang是否让您头痛。
恕我直言，最令人沮丧的体验来自获取/设置与视觉元素相关的特定范围的值。我不仅在自己的代码中而且在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')是，前者不考虑原型继承的值。使用下面的代码段获取整个图片（您不能直接更改值，但是$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。从网站http://ng-inspector.org/下载Firefox插件。在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;
}在console浏览器的Web开发人员工具的标签中，发出angular.reloadWithDebugInfo();
访问或重新加载要调试的页面，然后看到调试器出现在浏览器中。
您可以在代码中添加“调试器”并重新加载应用程序，这会将断点放在此处，您可以“跳过”或运行。
var service = {
user_id: null,
getCurrentUser: function() {
debugger; // Set the debugger inside
// this function
return service.user_id;
}您可以使用开发人员工具中内置的浏览器进行调试。
在浏览器中打开开发人员工具，然后转到“源”选项卡。
使用Ctrl + P打开要调试的文件并搜索文件名
单击代码左侧的行ny上添加断点。
刷新页面。
有很多可用于调试的插件，您可以参考使用chrome插件使用“ Debugger for chrome”插件来调试Angular Application
对于Visual Studio Code（非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
在终端中，执行/ Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222
在终端中，启动google-chrome --remote-debugging-port = 9222
由于附加组件不再起作用，因此我发现最有用的工具集是使用Visual Studio / IE，因为您可以在JS中设置断点并以这种方式检查数据。当然，Chrome和Firefox通常具有更好的开发工具。此外，良好的console.log（）超级有帮助！
也许您可以使用Angular Augury一个Google Chrome开发工具扩展程序来调试Angular 2及更高版本的应用程序。