Fehler lesen

CSS ist stumm. Schreibst du dort colour: red, verwirft der Browser die Zeile kommentarlos, und du suchst mit den Augen. JavaScript ist anders: es sagt dir, was nicht stimmt, und meistens auch, wo.

Diese Lektion ist deshalb keine Fleißaufgabe. Wer Fehlermeldungen überliest, sucht den Rest des Kurses an der falschen Stelle.

01 / 06Wie eine Fehlermeldung aufgebaut ist

Eine Meldung hat drei Teile, immer in derselben Reihenfolge:

Die Art, ganz vorn: ReferenceError, TypeError, SyntaxError. Sie sagt dir, welche Sorte Problem vorliegt, und damit meistens schon, wo du suchen musst.

Der Text, hinter dem Doppelpunkt: gesamtpreis is not defined. Er ist auf Englisch und trotzdem lesbar, weil immer dieselben paar Formulierungen vorkommen.

Die Fundstelle, dahinter: Dateiname, Zeile und Spalte, also etwa app.js:7:1. Sie ist unterstrichen und anklickbar. Klick darauf, und der Editor springt an genau diese Stelle und markiert die Zeile, bis du etwas änderst. Im echten Browser ist es dieselbe Geste, dort landest du in einem Reiter namens „Sources”.

Dazu kommt oft das Wort Uncaught davor. Das heißt nur: den Fehler hat niemand aufgefangen. Wie man Fehler auffängt, ist Thema von Abschnitt 14, bis dahin sind sie alle „uncaught” und du kannst das Wort überlesen.

02 / 06ReferenceError: den Namen gibt es nicht

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

console.log("Diese Zeile läuft noch.");

// Den Namen gibt es nirgends. Meistens ist so etwas ein Tippfehler.
console.log(gesamtpreis);

console.log("Und hier ist längst Schluss.");

gesamtpreis is not defined heißt wörtlich, was es sagt: An dieser Stelle wird ein Name benutzt, den nirgends jemand angelegt hat.

In neun von zehn Fällen ist das ein Tippfehler. gesamtPreis statt gesamtpreis, lenght statt length. In den übrigen Fällen ist es ein Name, den es zwar gibt, aber nicht hier, und dann ist der Gültigkeitsbereich schuld, den Abschnitt 5 erklärt.

Schau dir die erste Ausgabe im Beispiel an: die läuft noch. Danach ist Schluss, die letzte Zeile kommt nicht mehr dran. So verhalten sich alle Fehler dieser Sorte: sie brechen ab, sobald sie auftreten, und alles davor ist bereits passiert.

03 / 06TypeError: es geht nicht, was du verlangst

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

console.log("Diese Zeile läuft noch.");

// console gibt es. Aber schreib gibt es daran nicht.
console.schreib("Hallo");

console.log("Und hier ist längst Schluss.");

console.schreib is not a function heißt: console gibt es sehr wohl, aber schreib gehört nicht dazu. Der Name existiert also, er kann nur nicht, was du von ihm willst.

Diese Art wird dich am häufigsten treffen, sobald du in Abschnitt 10 mit der Seite arbeitest. Der Klassiker sieht so aus:

Cannot read properties of null (reading 'textContent')

Übersetzt: du hast document.querySelector nach einem Element gefragt, es hat keins gefunden und null geliefert, und null hat kein textContent. In Lektion 1.2 hast du die Schreib-Fassung davon schon gesehen: dort wurde textContent gesetzt statt gelesen, und die Meldung hieß entsprechend Cannot set properties of null (setting 'textContent'). Die Ursachen sind in beiden Fällen dieselben zwei: ein Tippfehler im Selektor oder ein Skript, das zu früh läuft.

Ein Wort zum Wortlaut: Diese Sätze sind nicht in jedem Browser gleich. Chrome schreibt Cannot read properties of null (reading 'textContent'), Firefox sagt zur selben Sache can't access property "textContent", element is null und nennt damit sogar die Variable, in der das null steckt. Dieser Kurs zitiert die Chrome-Fassung; wer mit Firefox lernt, liest in der Console die andere und meint dasselbe. Wiedererkennen musst du die Art des Fehlers und den Namen der Eigenschaft, nicht den Satz.

Merk dir für den Anfang die Faustregel: ReferenceError heißt, den Namen gibt es nicht. TypeError heißt, den Namen gibt es, aber er ist nicht das, wofür du ihn hältst.

04 / 06SyntaxError: gar nichts läuft

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

console.log("Diese Zeile sieht richtig aus.");
console.log("Diese auch.");

// Eine Klammer zu wenig. Die Datei wird gar nicht erst gelesen,
// deshalb bleiben auch die beiden Zeilen oben stumm.
console.log("Diese nicht.";

Hier ist es anders, und der Unterschied ist der Grund, warum diese Art oft so verwirrend ist.

Die ersten beiden Zeilen im Beispiel sind einwandfrei. Trotzdem geben sie nichts aus. Der Browser liest deine Datei nämlich erst komplett durch, bevor er die erste Zeile ausführt. Stößt er beim Lesen auf etwas, das grammatisch nicht aufgeht, hört er auf, und dann läuft die Datei gar nicht.

Daraus folgt eine praktische Regel: Wenn überhaupt nichts passiert, obwohl oben ein console.log steht, ist es ein Syntaxfehler. Und der steht dann irgendwo weiter unten. Die Zeilennummer in der Meldung hilft dir dabei, ist aber manchmal um eine oder zwei daneben: der Browser merkt erst später, dass etwas nicht aufgeht, und meldet die Stelle, an der es endgültig kippt.

Die drei häufigsten Ursachen sind eine Klammer zu wenig, eine geschweifte Klammer zu wenig und ein Anführungszeichen zu wenig. Dein Editor hilft dir dabei mehr, als du denkst: die farbige Hervorhebung kippt an der Stelle, an der er den Faden verliert. Wenn plötzlich der halbe Rest der Datei wie Text aussieht, fehlt ein Anführungszeichen.

05 / 06Warum ein Tippfehler nicht sofort auffällt

Eine Frage, die sich lohnt: Warum meldet der Browser einen falsch geschriebenen Namen nicht schon beim Lesen? Das Semikolon-Problem merkt er doch auch sofort.

Weil beides an verschiedenen Punkten passiert. Ob ein Satz grammatisch aufgeht, sieht man ihm an. Ob es den Namen gesamtpreis gibt, entscheidet sich erst, wenn das Programm an dieser Stelle ankommt, und bis dahin könnte ihn ja noch jemand angelegt haben. JavaScript prüft Namen deshalb erst beim Ausführen.

Das hat eine unangenehme Folge: Ein Tippfehler in einem Zweig, den du selten durchläufst, kann monatelang unentdeckt bleiben. Sprachen mit Typprüfung wie TypeScript sind genau dafür gebaut, sie finden solche Dinge vorher. Für diesen Kurs bleibt es beim Blick in die Console, und der reicht weiter, als man denkt.

06 / 06Die Gewohnheit

Wenn etwas nicht funktioniert, ist der erste Griff die Console. Nicht der zweite und nicht der fünfte. Bevor du irgendetwas änderst, liest du, was da steht: welche Art, welcher Text, welche Zeile.

Das klingt banal. Es ist der einzige Unterschied zwischen jemandem, der einen Fehler in zwei Minuten findet, und jemandem, der eine Stunde lang rät.