Методы отладки AngularJS

#angularjs #javascript-debugger

#angularjs #javascript-отладчик

Вопрос:

история:

я решил проблему с поиском angularjs в Google и нашел решение.
проблема началась с определенной версии 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']);
...
  

это решение
(ошибка заключалась просто в том, что модуль не был загружен)

мой вопрос:

  1. как я могу отладить angularjs (в дидактических целях), чтобы понять, что модуль не был загружен?
  2. какой инструмент мне нужен для отладки? (если мне это нужно)
  3. ниже сообщения об ошибке, вызванной проблемой (что это подсказывает мне? что является «ключевым» признаком для поиска проблемы?)
  4. есть предложения по отладке этой конкретной проблемы? существует ли «трассировка стека», чтобы следовать тому, что 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=ngRouteamp;p1=Error%3A%20%5B$injector%3Anomod%5D 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%3A%2F/errors.angularjs.org/1.2.18%2F$injector%2Fnomod?p0%3DngRoute
%20%20 at Anonymous function (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1643:11)
%20%20 at ensure (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1567:5)
%20%20 at module (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1641:7)
%20%20 at Anonymous function (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3817:11)
%20%20 at forEach (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:320:7)
%20%20 at loadModules (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3811:5)
%20%20 at Anonymous function (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3818:11)
%20%20 at forEach (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:320:7)
%20%20 at loadModules (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3811:5)
%20%20 at createInjector (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3751:3)

   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=TodoAppamp;p1=Error%3A%20%5B$injector%3Amodulerr%5D Failed to instantiate module ngRoute due to%3A
Error%3A%20%5B$injector%3Anomod%5D 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%3A%2F/errors.angularjs.org/1.2.18%2F$injector%2Fnomod?p0%3DngRoute
%20%20 at Anonymous function (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1643:11)
%20%20 at ensure (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1567:5)
%20%20 at module (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1641:7)
%20%20 at Anonymous function (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3817:11)
%20%20 at forEach (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:320:7)
%20%20 at loadModules (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3811:5)
%20%20 at Anonymous function (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3818:11)
%20%20 at forEach (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:320:7)
%20%20 at loadModules (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3811:5)
%20%20 at createInjector (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3751:3)
http%3A%2F/errors.angularjs.org/1.2.18%2F$injector%2Fmodulerr?p0%3DngRoute&p1%3DError%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)
%20%20 at Anonymous function (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3845:9)
%20%20 at forEach (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:320:7)
%20%20 at loadModules (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3811:5)
%20%20 at Anonymous function (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3818:11)
%20%20 at forEach (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:320:7)
%20%20 at loadModules (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3811:5)
%20%20 at createInjector (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:3751:3)
%20%20 at doBootstrap (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1410:5)
%20%20 at bootstrap (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1425:5)
%20%20 at angularInit (http%3A%2F%2Flocalhost:12153%2FScripts/angular.js:1338:5)
  

Ответ №1:

Вы можете использовать расширение Batarang для Google Chrome. Я думаю, что это удовлетворит некоторые ваши требования. Он расширяет инструменты разработчика, добавляя инструменты для отладки и профилирования приложений AngularJS.

Вот ссылка на сообщение в блоге и демонстрационное видео:

Ответ №2:

  1. Angularjs предоставляет сообщение об ошибке, и вы только что опубликовали его

    Ошибка: [$injector:modulerr] Не удалось создать экземпляр модуля ngRoute из-за:

    Ошибка: [$injector:nomod] Модуль ‘ngRoute’ недоступен! Вы либо неправильно написали имя модуля, либо забыли его загрузить. При регистрации модуля убедитесь, что вы указали зависимости в качестве второго аргумента.

  2. Для отладки angular есть плагин AngularJS Batarang. Это больше для значений области отладки;

  3. Вот ключ к решению вашей проблемы: модуль ‘ngRoute’ недоступен!

  4. Опять же, я думаю, что журнал ошибок angular довольно подробный, чтобы помочь вам найти правильный способ решения проблемы

Также очень полезна документация, здесь приведена инструкция по установке