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

Question

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

Answer 1

在Chrome浏览器中打开开发者控制台,这允许您:

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

一般的tipps:

• 使用一些console.log语句,如"现在运行ControllerXYZ",这样你就可以看到,当你的控制器被执行或你在状态之间转换时.
• 当使用ui-router时,我发现将一个console.log语句添加到$ stateChangeStart,$ stateChangeSuccess和$ stateChangeError事件处理程序中非常重要,它们会显示您在状态之间转换时或状态转换时发生错误,而不是我是盲目的...
• {{anImportantVariable | json}}在html中添加一些通常足以调试内容.

而最重要的是:如果一切看起来都不错,但它仍然不起作用,问题是99%:

• 一个范围问题(参见这里:为什么我在使用离子滚动时需要$ parent来启用ng-click功能？)
• 或者找不到拼写错误和指令(通常是因为JS中的CamelCase是HTML中的破坏案例:例如ngShowJS ng-show中的指令是HTML,isOpenJS is-open中的属性是HTML)

Answer 2

在检查状态时:即使我总是(讽刺的)为我的代码中的每个条件编写单元测试(所以我通常不需要调试东西),这是我最喜欢的技术:

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

简单的例子:小提琴