AngularJs – Debugging mit Chrome z.B. “Uncaught object” – Part 3


Eine der wichtigsten Themen beim Entwickeln ist das Debuggen bzw. die Ausgabe von Fehlermeldungen. Daher habe ich mich am Anfang etwas schwer getan bei AngularJs. Denn wenn man mit Chrome (v35.0.x) entwickelt und AngularJs v1.2x verwendet, gibt es anscheinend einen Bug, der verhindert das Fehlermeldungen auf der Konsole entsprechend ausgegeben werden oder nur die Fehlermeldung “Uncaught object” erscheint. Im Firefox besteht dieses Problem nicht, hier wird eine entsprechend aussagekräftige Fehlermeldung ausgegeben.

Da ich aber zum Entwickeln immer nur Chrome verwendet habe, war ich anfangs über keine bzw. über die nichtssagenden Fehlermeldungen nicht gerade begeistert. Hier kann man nur darauf hoffen das der Bug bald gefixt wird oder man erweitert vorläufig die “angular.js” Datei um eine Zeile, um zumindest auch “verschluckte” Fehlermeldungen im Chrome anzuzeigen, hier fehlt dann zwar der entsprechende Stacktrace, aber meist hat dies bereits für die Lösung ausgereicht.

Man erweitere die “minErr” Funktion von AngularJs um eine “console.error(message)” Zeile um eine passende Meldung auszugeben.

...
for (i = 2; i < arguments.length; i++) {
   message = message + (i == 2 ? '?' : '&') + 'p' + (i-2) + '=' +
     encodeURIComponent(stringify(arguments[i]));
}
  //erweitert um die Meldung direkt auf der Konsole auszugeben
  console.error(message);

  return new Error(message);
};

Hinweis: Wenn die zusätzliche Zeile zum Anzeigen der Fehlermeldungen eingebunden ist, kann es sein das man den folgenden Fehler sieht: “[$injector:nomod] Module ’ngLocale‘ 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.” die scheint aber ebenfalls ein Bug zu sein und hat keine mir bekannten Auswirkungen auf ein funktionierendes AngularJs Programm.

Man kann natürlich auch einfach Firefox zum Entwickeln verwenden, aber für Chrome stehen noch zwei weitere Tools zur Verfügung um sich z.B. den aktuellen scope anzeigen zu lassen.

Dabei handelt es sich zum einen um “AngularJs Batarang”, was aber anscheinend nicht weiter entwickelt wird. Aber eventuell kann es einem doch hier und da helfen. Wenn man Batarang installiert hat, findet man es direkt in der Developer Toolbar von Chrome als “AngularJs” Tab.

image

Das andere Tool nennt sich “ng-inspector” und kann ebenfalls im Chrome installiert werden. Wenn der ng-inspector installiert ist, findet man ihn rechts neben der Adressleiste.

image

Der ng-inspector zeigt alle ng-elemente an und wenn man ein Element anklickt wird in der Konsole das entsprechende Element/Objekt ausgegeben. Das Tool scheint sich auch noch in der Entwicklung zu befinden, denn das github Projekt wird aktuell noch regelmäßig aktualisiert.

image

Was mir auch schon öfter weitergeholfen hat, ist die Ausgabe von Variablen direkt im HTML mit “{{varname}}” diese Syntax lässt sich aber noch entsprechend erweitern um zum Beispiel JsonDaten entsprechend Formatiert im Browser mit AngularJS anzuzeigen für das Debugging. Dafür einfach das folgende Code Snipped verwenden:

<pre>{{ctrl.ViewModel | json}}</pre>

und schon werden Json Objekte perfekt formatiert angezeigt.

Häufige Anfängerfehler mit AngularJS

wenn man mit AngularJS beginnt, fragt man sich oft, warum passiert den nichts und warum wird nichts angezeigt oder warum stehen die Plain “{{varname}}” Tags noch im HTML. Dann hatte ich meist eine der folgenden Probleme zu überwinden:

  • die “ng-app” Direktive wurde nicht im HTML definiert bzw. es wurde das falsche Modul in “ng-app” zugeordnet
  • die “ng-app” Direktive wurde ausversehen doppelt bzw. verschachtelt registriert
  • ich habe vergessen den “ng-controller” zu definieren und damit war auch der richtige $scope nicht vorhanden
  • ein neues Modul “angular.module…” muss auch im zentralen app Modul hinzugefügt/registriert werden
  • wenn man für jedes Modul eine eigene JavaScript Datei anlegt, hat man evtl. vergessen die neue JavaScript Datei mit einzubinden
  • Direktiven werden in camelCase Schreibweise definiert, werden aber im HTML Code mit Bindestrich aufgerufen “camel-case”
  • Wenn man externe AngularJS Komponenten verwendet wie z.B. AngularUI, nicht vergessen das diese auch im zentralen app Modul für unsere Anwendung mit definiert werden müssen. Da diese sonst nicht gefunden werden und damit auch nicht funktionieren.

Quelle:

http://www.congral.com/2014/05/29/have-you-already-encountered-the-uncaught-object-exception/

http://ng-inspector.org/

Advertisements

Ein Gedanke zu „AngularJs – Debugging mit Chrome z.B. “Uncaught object” – Part 3

  1. Pingback: AngularJS – DropDownListe (select/option) – Part 1 | SquadWuschel's Blog

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s