Fehler von der Entwicklung bis zum Einsatz
Javascript-Bugs entstehen durch eigene Fehler und durch fremden Code, auf den man vertraut. Einige Fehler fallen schon während der Entwicklung auf (z.B. Tippfehler), andere lauern in den Tiefen, bis ein Benutzer sie durch eine unvorhergesehene Aktion ans Tageslicht bringt.
Programmierung ist wie die alten Point- and Klick-Adventurespiele. Mit jeder Lösung eines Rätsels stehen wir der nächsten Herausforderung: Such nach einer Türe. Öffne die Türe. Tür ist verschlossen. Such den Schlüssel. …
Der wichtigste Schritt zur Vermeidung von Fehlern ist neben einer sauberen und strengen Javascript-Syntax vor allem schlicht und einfach valides HTML, aber auch dann rauben Fehler viel Zeit.
Die Suche nach Logik-Fehlern ist der aufwändigste Teil der Programmierung – nicht nur bei Javascript.
Die Fehler, die durch mangelnde Kompatibilität der Browser entstehen, sind heute zum größten Teil mitsamt ihren Browsern verschwunden. Davon war vor allem das DOM – das Document Object Model – betroffen. Dennoch ist das DOM eine Hauptursache von Logikfehlern.
Entwickler-Tools: Browser-Console
Die gebräuchlichste Methode bei der Fehlersuche war die Javascript-Funktion alert(), die kleine Statusmeldungen in einem modalen Fenster (Dialogfenster) ausgibt. Sobald mehrere Ausgaben nötig sind, wird der Klick auf das OK der alert-Ausgabe nervig. Und wer schon einmal ein alert() in eine while-Schleife gesetzt hat … au weia …
Praktischer, informativer und trotzdem intuitiv ist die Ausgabe von Javascript-Testinformationen in die Console des Browsers, die unter den Entwickler-Werkzeugen liegen.
console.log
Die Manipulation von DOM-Elementen mit Javascript ist HTML-Codierung im Blindflug, denn was wir via Javascript als Knoten einsetzen, erscheint nicht im Quelltext.
Die Console des Browsers ist das einfachste Radarsystem, wenn wir herausfinden wollen, ob ein DOM-Node oder ein Attribut an der richtigen Stelle eingefügt wurden. Der Javascript-Befehl console.log() gibt eine Nachricht als String mit Variablen in die Consolen von Firefox, Chrome oder Safari und auch von Internet Explorer aus.
Ausgaben mit dem Aufruf von Javascript console.log() erscheinen in der Fehlerkonsole.
In den Webkit-Browsern öffnet CMD ALT J (Chrome) bzw. CMD ALT C (Safari) die Console auf dem Mac direkt, auf dem PC CTRL ALT J. Bei IE öffnet F12 die Console.
Mit dem Pfeilsymbol aus der Fußleiste auf das Element klicken, das untersucht werden soll
Elements untersucht die HTML-Struktur und zeigt CSS-Stile an. Console untersucht die Abläufe in Javascript und zeigt frisch eingefügte Elemente und ihre Attribute.
console.log() ist kein offizieller Bestandteil von Javascript, sondern ein Add-On der WhatWG, das Firefox, IE, Chrome und Safari im Entwickler-Menü unterstützen.
console.warn und console.error
Mit console.warn und console.error werden Javascript-Fehlermeldungen farbig gekennzeichnet, damit sie sich aus den übrigen Konsolenmeldungen besser herausheben.
const warn = "Dies ist eine Warnung!";
const err = "Dies ist eine Fehlernachricht";
const var1 = 110;
const var2 = "Var 2";
document.getElementById('warn').onclick = function() {
console.warn(warn);
console.error(err);
console.log(var1, var2);
}
Neben der Angabe eines einfachen Strings oder einer Variablen lassen sich mehrere Ausgaben einfach durch ein Komma trennen, um z.B. mehrere Variablen ohne große Formatierung in die Konsole zu schreiben.
console.info
console.info('Hier kommt eine Info')
ist im Grunde genommen nichts anderes als console.log.
DOM-Fragmente ausgeben
Genauso wie bei der direkten Eingabe von Anweisungen in die Console geben Anweisungen Listen von Knoten des DOM mitsamt allen childNodes aus.
console.log (document.getElementById('qs'));
console.log (document.querySelector('#qs').attributes);
Prüfen, ob das anvisierte Element oder Eigenschaften tatsächlich erreicht werden – perfekt.
Consolen-Ausgabe gruppieren
Das hält die Consolen-Ausgabe bei aufwändigen Analysen übersichtlich:
console.group ('Alle ul-Elemente');
console.dir (document.querySelectorAll('ul'));
console.groupEnd ();
console.groupCollapsed('Alle img-Elemente');
console.dir (document.querySelectorAll ('img'));
console.groupEnd ();
console.group fächert die Ausgaben unter dem Dreieck auseinander, console.groupCollapsed faltet die Ausgaben zusammen.
try catch – Fehler abfangen
Die Anweisungen try … catch vereinfachen den Umgang mit Fehlern. Innerhalb des try-Blocks liegen Anweisungen, und wenn eine dieser Anweisungen zu einem Fehler führt, würden die folgenden Anweisungen nicht mehr ausgeführt.
Der catch-Block fängt Fehler im try-Block ab. Sollen Aktionen bei einem Fehlerfall innerhalb des try-Blocks auf jeden Fall ausgeführt werden, werden sie in einen abschließenden finally-Block gesetzt.
Trace ein, Trace aus
Wenn gleich zu Beginn eine Variable var trace = true; vereinbart wird und die Konsolen-Ausgabe stets an trace == true gebunden ist, lässt sich der Trace des Programmablaufs durch ein einfaches trace = false; deaktivieren.
var trace = true;
…
if (trace) console.log('Wie stehen die Werte?');
Bei komplexen Javascript-Programmen wird der Javascript-Debugger sicher bessere Dienste leisten, aber bei kleinen und einfachen Scripten und für Einsteiger in die Programmierung mit Javascript ist console.log() oder die Variationen der Consolen-Meldung eine schnelle Methode der Fehlersuche und helfen dabei, den eigenen Scriptcode und den Ablauf des Programms besser zu verstehen.