angularjs - 调试 Angular 代码的最佳方法是什么？

Question

我是 Angular 领域的新手。我一直在调试我的代码时遇到问题。有没有被证明在调试 Angular 方面更有效的方法？

Answer 1

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

设置断点并查看代码中发生了什么

当您在断点处等待执行某些代码或检查变量的内容时，请使用开发人员工具中的控制台

使用“选择元素”工具选择任何 HTML 元素，然后在控制台中键入“$scope”以查看此元素的 $scope 上的内容。

一般提示:

使用一些 console.log 语句，比如“现在运行 ControllerXYZ”，这样你就可以看到，当你的 Controller 被执行或当你在状态之间转换时。

使用 ui-router 时，我发现将 console.log 语句添加到 $stateChangeStart、$stateChangeSuccess 和 $stateChangeError 事件处理程序中非常重要，它会显示您何时在状态之间转换或在状态转换时发生错误，但我是盲目的...

添加一些 {{anImportantVariable | json}}进入 html 通常足以调试东西。

最重要的是:如果一切正常，但仍然无法正常工作，则问题出在 99%:

要么是范围问题(参见此处:Why do I need $parent to enable the function in ng-click when using ion-scroll?)

或者拼写错误而找不到指令(通常是因为 JS 中的 CamelCase 到 HTML 中的破折号:例如 ngShow JS 中的指令在 HTML 中是 ng-show，而 isOpen JS 中的属性是 is-open在 HTML)