AngularJS 调试技术答案

【问题标题】：AngularJS debugging techniquesAngularJS 调试技术
【发布时间】：2014-08-11 02:39:39
【问题描述】：

故事：

我解决了一个关于 angularjs 在谷歌上搜索的问题，我找到了解决方案。
问题是从特定版本的 angularjs 开始的，当时 Angular 团队从库的核心中删除了一个模块，现在您必须明确指出是否使用它。
我说的模块是“ngRoute”

之前：

<script src="angular.js"></script>
...
var myApp = angular.module('myApp', ['someOtherModule']);

之后

<script src="angular.js"></script>
<script src="angular-route.js"></script>
...
var myApp = angular.module('myApp', ['ngRoute', 'someOtherModule']);
...

这就是解决方案（错误只是模块未加载）

我的问题是：

如何调试 angularjs（用于教学目的）以了解那个模块没有加载？
我需要什么工具来调试？（如果我需要）
问题导致的消息错误下方（什么它对我有什么建议吗？什么是找到的“关键”指示有问题吗？）
对调试这个特殊问题有什么建议吗？是否存在“堆栈跟踪”以遵循 angularjs 在内部所做的事情一步一步？

错误信息：

Eccezione non gestita alla riga 3845, colonna 9 in http://localhost:12153/Scripts/angular.js

0x800a139e - Errore di run-time di JavaScript: [$injector:modulerr] Failed to instantiate module TodoApp due to:

Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:

Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ngRoute

   at Anonymous function (http://localhost:12153/Scripts/angular.js:1643:11)

   at ensure (http://localhost:12153/Scripts/angular.js:1567:5)

   at module (http://localhost:12153/Scripts/angular.js:1641:7)

   at Anonymous function (http://localhost:12153/Scripts/angular.js:3817:11)

   at forEach (http://localhost:12153/Scripts/angular.js:320:7)

   at loadModules (http://localhost:12153/Scripts/angular.js:3811:5)

   at Anonymous function (http://localhost:12153/Scripts/angular.js:3818:11)

   at forEach (http://localhost:12153/Scripts/angular.js:320:7)

   at loadModules (http://localhost:12153/Scripts/angular.js:3811:5)

   at createInjector (http://localhost:12153/Scripts/angular.js:3751:3)

http://errors.angularjs.org/1.2.18/$injector/modulerr?p0=ngRoute&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'ngRoute'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.18%2F%24injector%2Fnomod%3Fp0%3DngRoute%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1643%3A11)%0A%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1567%3A5)%0A%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1641%3A7)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3817%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3818%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3751%3A3)

   at Anonymous function (http://localhost:12153/Scripts/angular.js:3845:9)

   at forEach (http://localhost:12153/Scripts/angular.js:320:7)

   at loadModules (http://localhost:12153/Scripts/angular.js:3811:5)

   at Anonymous function (http://localhost:12153/Scripts/angular.js:3818:11)

   at forEach (http://localhost:12153/Scripts/angular.js:320:7)

   at loadModules (http://localhost:12153/Scripts/angular.js:3811:5)

   at createInjector (http://localhost:12153/Scripts/angular.js:3751:3)

   at doBootstrap (http://localhost:12153/Scripts/angular.js:1410:5)

   at bootstrap (http://localhost:12153/Scripts/angular.js:1425:5)

   at angularInit (http://localhost:12153/Scripts/angular.js:1338:5)

http://errors.angularjs.org/1.2.18/$injector/modulerr?p0=TodoApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20ngRoute%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'ngRoute'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.18%2F%24injector%2Fnomod%3Fp0%3DngRoute%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1643%3A11)%0A%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1567%3A5)%0A%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1641%3A7)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3817%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3818%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3751%3A3)%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.18%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'ngRoute'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttp%253A%252F%252Ferrors.angularjs.org%252F1.2.18%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A1643%253A11)%250A%2520%2520%2520at%2520ensure%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A1567%253A5)%250A%2520%2520%2520at%2520module%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A1641%253A7)%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3817%253A11)%250A%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A320%253A7)%250A%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3811%253A5)%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3818%253A11)%250A%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A320%253A7)%250A%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3811%253A5)%250A%2520%2520%2520at%2520createInjector%2520(http%253A%252F%252Flocalhost%253A12153%252FScripts%252Fangular.js%253A3751%253A3)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3845%3A9)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3818%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A320%3A7)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3811%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A3751%3A3)%0A%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1410%3A5)%0A%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1425%3A5)%0A%20%20%20at%20angularInit%20(http%3A%2F%2Flocalhost%3A12153%2FScripts%2Fangular.js%3A1338%3A5)

【问题讨论】：

标签： angularjs javascript-debugger

【解决方案1】：

您可以使用谷歌浏览器扩展程序Batarang。我认为它会满足你的一些要求。它扩展了开发工具，添加了调试和分析 AngularJS 应用程序的工具。

Here is the link to the blog post and demo video:

【讨论】：

【解决方案2】：

Angularjs 提供了错误信息，而你刚刚发布了它

错误：[$injector:modulerr] 无法实例化 module ngRoute，原因是：

错误：[$injector:nomod] 模块“ngRoute”不可用！您模块名称拼写错误或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
对于调试角度有AngularJS Batarang 插件。更多的是用于调试范围值；
这里是解决您问题的关键：Module 'ngRoute' 不可用！
我再次认为角度错误日志非常冗长，可以帮助您找到解决问题的正确方法

文档也很有帮助，这里是ngRoute installation instruction

【讨论】：