调试角度代码的最佳方法是什么？

Question

我是Angular空间的新手。我一直在调试代码时遇到问题。任何证明在调试Angular时更有效的方法？

Answer 1

在Chrome浏览器中打开开发者控制台，这样您就可以：

• 设置断点并查看代码中的内容
• 在断点处等待执行某些代码或检查变量内容时，在开发人员工具中使用控制台
• 使用“select element”工具选择任何HTML元素，然后在控制台中键入“$ scope”以查看此元素的$ scope上的内容。

一般的tipps：

• 使用一些console.log语句，例如“立即运行ControllerXYZ”，以便在执行控制器或在状态之间转换时看到。
• 当使用ui-router时，我发现将一个console.log语句添加到$ stateChangeStart，$ stateChangeSuccess和$ stateChangeError事件处理程序中非常重要，它们会显示您在状态之间转换时或状态转换时发生错误，而不是我是瞎子......
• 在html中添加一些{{anImportantVariable | json}}通常足以调试内容。

并且最重要的是：如果一切看起来都不错，但仍然无法解决，问题是99％：

• 要么是范围问题（请参阅此处：Why do I need $parent to enable the function in ng-click when using ion-scroll?）
• 或者找不到拼写错误和指令（通常是因为JS中的CamelCase是HTML中的破折号：例如JS中的ngShow指令在HTML中是ng-show，{{1 JS中的属性是HTML中的isOpen

Answer 2

当涉及到检查状态时：即使我总是（讽刺的）为我的代码中的每个条件编写单元测试（所以我通常不需要调试东西）这是迄今为止我最喜欢的技术：< / p>

<pre ng-show='mymodel.debugPlz'>{{ mymodel.something | json }}</pre>

简单示例：fiddle

Answer 3

Chrome DevTools通常可以很好地完成工作。您可以在代码中的任何位置插入debugger;语句，如果Chrome DevTools打开，代码将停在那里，您可以逐一添加断点和遍历行。除此之外，只需在Chrome网上应用店中搜索Angular即可使用一些扩展程序。这些通常有助于检查$scope

Answer 4

如何使用AngularJS Batarang Chrome扩展程序

它为您提供了所选元素当前范围的精彩概述

正如您在屏幕截图中看到的那样，有一个新的范围选项卡