如何debuggingAngular JavaScript代码
我正在使用Angular JavaScript进行概念validation。
如何在不同浏览器（Firefox和Chrome）中debuggingAngular JavaScript代码？
1. Chrome
对于Chrome中的 Debug AngularJS，你可以使用AngularJS Batarang 。 （从最近关于插件的评论看来，AngularJS Batarang不再被维护，在各种版本的Chrome中testing不起作用）
这里是描述和演示的链接：
Angular JS Batarang介绍
从这里下载chrome插件： 用于debuggingAngularJS的chrome插件
你也可以参考这个链接： ng-book：debuggingAngularJS
您也可以使用ng-inspect来debuggingangular度。
2. Firefox
对于Firebug的帮助，您可以debugging代码。
也可以使用这个Firefox附加组件： AngScope：Firefox附加组件 （AngularJS Team不是官方扩展组件 ）
3.debuggingAngularJS ：检查链接： debuggingAngularJS
恕我直言，最令人沮丧的经验来自获取/设置与视觉元素相关的特定范围的值。 我不仅在自己的代码中做了很多断点，而且在angular.js本身也做了很多断点，但是有时它并不是最有效的方法。 虽然下面的方法是非常强大的，但是如果你真的在生产代码中使用它们，它们肯定被认为是不好的做法，所以明智地使用它们！
从视觉元素获取控制台中的参考
在许多非IE浏览器中，您可以通过右键单击元素并单击“检查元素”来select元素。 或者，您也可以单击Chrome中“元素”选项卡中的任何元素。 最新选定的元素将被存储在控制台中的variables$0中。
获取链接到元素的范围
根据是否存在创build隔离作用域的指令，您可以通过angular.element($0).scope()或angular.element($0).isolateScope() （使用$($0).scope()如果$被启用）。 这正是您使用最新版本的Batarang时所得到的结果。 如果直接更改值，请记住使用scope.$digest()来反映UI上的更改。
$ eval是邪恶的
不一定用于debugging。 当你想快速检查一个expression式是否具有期望值时， scope.$eval(expression)非常方便。
范围的失踪原型成员
scope.bla和scope.$eval('bla')之间的区别scope.$eval('bla')是前者不考虑原型inheritance的值。 使用下面的代码片段获取整个图片（不能直接更改值，但是可以使用$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和一切。
还有$日志，你可以使用！ 它使您的控制台以您希望的方式工作！
显示错误/警告/信息您的控制台通常显示您的方式！
使用这个> 文档
尽pipe问题得到了解答，但看一下ng-inspector也许会很有趣
尝试ng-inspector。 从网站http://ng-inspector.org/下载Firefox附加组件。; 它在Firefox附加菜单上不可用。
http://ng-inspector.org/ng-inspector.xpi – Firefox附加组件
不幸的是，大多数附加组件和浏览器扩展只是向您显示值，但不允许您编辑范围variables或运行angular度函数。 如果你想改变浏览器控制台（在所有浏览器）的$ scopevariables，那么你可以使用jQuery。 如果你在AngularJS之前加载jQuery，angular.element可以传递一个jQueryselect器。 所以你可以检查控制器的范围
angular.element('[ng-controller="name of your controller"]').scope()
示例：您需要更改$ scopevariables的值，然后在浏览器中查看结果，然后在浏览器控制台中input：
angular.element('[ng-controller="mycontroller"]').scope().var1 = "New Value"; angular.element('[ng-controller="mycontroller"]').scope().$apply();
您可以立即在浏览器中看到更改。 我们使用$ apply（）的原因是：任何从外部angular度上下文更新的范围variables都不会更新它的绑定，你需要在使用scope.$apply()更新范围值之后运行摘要循环scope.$apply() 。
为了观察一个$ scopevariables值，你只需要调用这个variables。
示例：您想在Chrome或Firefox的Web控制台中查看$ scope.var1的值，只需键入：
angular.element('[ng-controller="mycontroller"]').scope().var1;
结果将立即显示在控制台中。
var rootEle = document.querySelector("html"); var ele = angular.element(rootEle);
scope（）我们可以通过在元素上使用scope（）方法从元素（或其父元素）中获取$ scope：
var scope = ele.scope();
注射器（）
var injector = ele.injector();
有了这个注入器，我们就可以实例化我们的应用程序内部的任何Angular对象，比如服务，其他控制器或者任何其他对象
将调用添加到打算使用它的地方。
someFunction(){ debugger; }
在浏览器的Web开发人员工具的console选项卡中，发出angular.reloadWithDebugInfo();
访问或重新加载您打算debugging的页面，并看到debugging器出现在浏览器中。
您可以在代码中添加“debugging器”，并重新加载应用程序，从而将断点放在那里，您可以“跨越”或运行。
var service = { user_id: null, getCurrentUser: function() { debugger; // Set the debugger inside // this function return service.user_id; }
对于Visual Studio代码（不是Visual Studio），请按Ctrl + Shift + P
在search栏中键入Chrome的debugging器，安装并启用它。
在你的Lanche.json文件中添加这个configuration：
{ "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并启用远程debuggingfunction，才能将扩展程序附加到Chrome上。
- 视窗
右键单击Chrome快捷方式，然后select属性在“目标”字段中，追加–remote-debugging-port = 9222或者在命令提示符下执行/chrome.exe –remote-debugging-port = 9222
- OS X
在terminal中，执行/ Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome –remote-debugging-port = 9222
- Linux的
在terminal中，启动google-chrome –remote-debugging-port = 9222
查找更多===>
由于附加组件不再工作，所以我find的最有用的一套工具是使用Visual Studio / IE，因为您可以在JS中设置断点并以这种方式检查数据。 当然，Chrome和Firefox通常具有更好的开发工具。 另外，好的console.log（）已经非常有帮助！
也许你可以使用Angular Augury一个谷歌Chrome开发工具扩展来debuggingAngular 2和以上的应用程序。
