Javascript Fehlersuche mit der Console

JS Fehlersuche: Bugs im Script

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, reicht die Fachkenntnis nicht oder die Spezifikation hat Lücken: Logikfehler sind nicht einfach auszumachen.

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.

Der wichtigste Schritt zur Vermeidung von Fehlern ist neben einer sauberen und strengen Javascript-Syntax auch ganz schlicht und einfach valides HTML, aber auch dann rauben Fehler viel Zeit.

Einige Arten von Fehlern können wir mit window.onerror unterdrücken, damit sie zur Laufzeit – wenn ein Besucher die Seite aufruft – nicht zutage treten. Allerdings verschleiert das Abfangen die Ursache der Fehler und korrigiert sie nicht.

Die Suche nach Logik-Fehlern ist der aufwändigste Teil der Programmierung – nicht nur bei Javascript.

Programmierer haben viel seltener Tattoos als andere Menschen, denn sie wissen, dass Fehler immer wieder vorkommen, auch wenn drei Leute prüfen und keinen Fehler entdecken.
Und sie wissen, dass alles jederzeit ändern kann.

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.

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 auf die Console des Browsers.

if (console && console.log)
console.log("text" + myvariable);

Die Abfrage if (console && console.log) { … } verhindert Fehlermeldungen in Browsern, die keine Konsolenmeldungen unterstützen. Kann heute wegfallen, denn alle Browser haben sich der Console angeschlossen.

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-Konsole mit Kontext-Menü öffnen
Rechte Maustaste und im Kontextmenü »Element untersuchen«

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

Console: Elements anzeigen
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.

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

JS Fehlersuche: Bugs im Script console.log Zurück Vorwärts Neu laden Speichern unter … Drucken … Streamen … Übersetzen in Deutsch Seitenquelltext anzeigen Untersuchen Elements Network Sources Console Zurück Vorwärts Neu laden Speichern unter … Drucken … Streamen … Übersetzen in Deutsch Seitenquelltext anzeigen Untersuchen <p>…</p> <figure class="chrome-console-aufrufen">…</figure> <p>…</p><p>…</p> <p>…</p> figure .chrome-console-aufrufen | 700x261.55