Fehler von der Entwicklung bis zum Einsatz
Javascript-Bugs entstehen durch eigene Fehler und durch fremden Code, auf den man vertraut. Einige fallen schon während der Entwicklung auf, 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. …
Und was sagt der Oberlehrer? Der wichtigste Schritt zur Vermeidung von Fehlern ist neben einer sauberen und strengen Javascript-Syntax schlicht und einfach fehlerfreies sauberes HTML, aber auch dann rauben Fehler viel Zeit.
SyntaxError – Syntax-Fehler
Kennen wir alle: ob nicht geschlossene Klammern, unexpected token, weil sich ein seltsames Zeichen eingeschlichen hat, oder ein reserviertes Wort als Variablenname – das sind typische Syntaxfehler.
const new = 42;
[Error] SyntaxError: Cannot use the keyword 'new' as a lexical variable name.
JSON reagiert empfindlich auf überflüssige Kommas.
JSON.parse('{"location": "Moers",}');
[Error] SyntaxError: JSON Parse error: Property name must be a string literal
Wenn sich Anführungszeichen als Hochkommas ausgeben:
const stranger = “Hallo Gast“;
[Error] SyntaxError: Invalid character '\u201c'
Die Browser sind zuvorkommend und informieren mit Zeilennummern oder Einspielen der betroffenen Zeilen.
TypeError
Die Browser melden sieben Fehlertypen: TypeError, SyntaxError, ReferenceError, Auswertungsfehler (Evaluation Error), URIError und Internal Error. TypeError ist der häufigste Fehlermeldung während der Entwicklung. Eine Ursache sind Fehltreffer im DOM, z.B. der Zugriff auf ein HTML-Element, das noch nicht im Browser geladen ist.
<script>
const foo = document.querySelector(".foo");
console.log (foo.innerHTML);
</script>
<div class="foo">
Holla die Waldfee
</div>
Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
Solche Fehler lassen sich durch eine Abfrage abfangen. Diese Sicherungsmaßnahme ist auch angebracht, wenn wir uns auf fremden Code verlassen müssen.
const elem = document.querySelector ("#hamburg:checked + .hamburg .hamburg-line1")
if (elem) {
… alles klar … elem existiert
} else {
… gibt es nicht …
}
Funktionen und Methoden, die es nicht gibt, die falsch geschrieben sind, melden ebenfalls TypeError.
const myObject = {
location: "Weltraum",
captain: "Picard",
log () {
console.log ("location", location)
}
}
myObject.schiffslog();
Uncaught TypeError: myObject.schiffslog is not a function
Wenn eine Funktion oder Methode zwar existiert, aber mit einem falschen Datentyp aufgerufen wird:
const result = 15;
console.log (result.split(","));
mypage.html:195 Uncaught TypeError: result.split is not a function
ReferenceError
Zu ReferenceError kommt es, wenn eine Variablen-Referenz nicht gefunden wird oder nicht deklariert wurde.
console.log (rabbit);
[Error] ReferenceError: Can't find variable: rabbit
URIError
const uri = "https://www.mediaevent.de/javascript";
console.log ("uri decoded", decodeURI (uri));
const falseUri = "%https://www.mediaevent.de/css";
console.log ("uri decoded", decodeURI (falseUri))
[Error] URIError: URI error
rangeError
Ein rangeError tritt auf, wenn der Länge eines Array ein negativer Wert, ein Fließkomma-Wert oder ein Wert zugewiesen wird, der auf dem jeweiligen System nicht unterstützt wird.
const hobbitCheck = (age) => {
if (age < 42) throw new RangeError("Kein erwachsener Hobbit!");
return true;
}
hobbitCheck(12);
Uncaught RangeError: Kein erwachsener Hobbit!
Eine nicht ISO-konforme Zeichenkette für ein Datum kann ebenfalls zu einem rangeError führen.
const someDay = new Date("2023-23-24").toISOString()
[Error] RangeError: Invalid Date
EvalError und InternalError
Der EvalError wird heute nicht mehr ausgeworfen, sondern existiert nur der Rückwärts-Kompatibilität zu alten Browsern zuliebe.
Logikfehler – Browser-Konsole
Die Suche nach Logik-Fehlern ist der aufwändigste Teil der Programmierung – nicht nur bei Javascript. Das DOM ist eine Hauptursache von Logikfehlern, obwohl die früheren Unstimmigkeiten zwischen den Browsern beigelegt sind.
Die gebräuchlichste Methode bei der Fehlersuche war einst 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 Konsole des Browsers, die unter den Entwickler-Werkzeugen bzw. dem Inspektor der Browser liegt.
console.log
Die Manipulation von DOM-Elementen mit Javascript ist HTML-Codierung im Blindflug. Die Console des Browsers ist das Radarsystem, um herauszufinden, 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 der Console des Browsers aus.
- Mac OS
+ 
+ i - Windows STRG + Umschalten + i
- IE F12
Alle Browser öffnen die Konsole auch mit einem Rechtsklick in einen freien Bereich des Browserfensters.
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.
const elem = document.querySelector (".elem").outerHTML;
console.log (elem);
Jetzt mal nachsehen, welches HTML-Element das DOM hier tatsächlich enthält:
[Log] <figure class="elem" style="max-width: var(--max-width)"> (fehler-suchen.html, line 243)
<img loading="lazy" style="border:1px solid silver" src="img/browser-inspektor.webp" width="949" height="169" alt="Inspektor für Javascript">
<figcaption>Inspektor in der Browser-Konsole</figcaption>
</figure>
Neben der Angabe eines einfachen Strings oder einer Variablen lassen sich mehrere Ausgaben einfach durch ein Komma trennen, um mehrere Variablen ohne große Formatierung in die Konsole zu schreiben.
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.