Javascript Fehlersuche mit der Console

Javascript Fehlersuche: Scriptfehler

Ganz gleich, wie gut wir programmieren, ob wir Informatik studiert haben oder eigentlich nur das Webdesign mit etwas Javascript aufpeppen: Die meiste Zeit beim Programmieren verbringen wir mit der Fehlersuche.

Syntaxfehler finden wir mit Hilfe der Browser-Console schnell, aber nicht immer ist die Konzentration hoch genug, oder die Fachkenntnis reicht nicht, die Spezifikation hat Lücken oder ist einfach missverständlich: Logikfehler sind nicht einfach auszumachen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Browser-Console öffnen
Rechte Maustaste und im Kontextmenü »Element untersuchen«

Mit dem Pfeilsymbol aus der Fußleiste auf das Element klicken, das untersucht werden soll

Javascript Element untersuchen
Elements erforscht z.B. die aktuelle Breite und Höhe von Elementen. Weiterschalten auf Console für Javascipt-Konsolenausgaben.

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 trycatch 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.