JavaScript Academy · Lektion

Stacktraces lesen

Verfolgen Sie Fehler bis zu ihrer Quelle zurück.

Stacktraces lesen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Stack Trace

Ein Stack Trace ist die Liste der aktiven Funktionsaufrufe zu dem Zeitpunkt, an dem ein Fehler aufgetreten ist. Er zeigt den Weg, den das Programm bis zum Fehler genommen hat.

Von oben nach unten lesen

Der oberste Stack Frame eines Traces zeigt, wo der Fehler ausgelöst wurde. Jede darunterliegende Zeile zeigt den jeweiligen Aufrufer bis hin zum ursprünglichen Einstiegspunkt des Programms.

Aufbau eines Stack Frames

Jeder Stack Frame nennt normalerweise eine Funktion sowie die Datei, die Zeilennummer und die Spalte, an der der Aufruf erfolgt ist. So lässt sich die genaue Stelle bestimmen.

Die Fehlermeldung

Über den Stack Frames stehen der Fehlername und die Fehlermeldung, etwa ein TypeError, der beschreibt, was schiefgelaufen ist. Lesen Sie diese Angaben zuerst; sie erklären häufig bereits die Ursache.

function getName(user) {
  return user.name
}
// calling getName with undefined would throw a TypeError
console.log("Reading the message tells you what failed")

Die Aufrufkette verfolgen

Wenn Sie den Trace nach unten lesen, rekonstruieren Sie die Abfolge: welche Funktion welche andere Funktion aufgerufen hat und so zu der fehlerhaften Zeile geführt wurde.

Ihr Code und Bibliothekscode

Traces enthalten häufig auch Stack Frames aus Bibliotheken. Konzentrieren Sie sich auf den obersten Stack Frame, der zu Ihren eigenen Quelldateien gehört, da die Lösung meist dort zu finden ist.

Asynchrone Stack Traces

Moderne DevTools fügen asynchrone Aufrufe zusammen. Dadurch wird der ursprüngliche Kontext eines Promise oder Timers angezeigt, sodass der Trace nicht an dieser Grenze abbricht.

Einen Trace manuell erzeugen

console.trace gibt den aktuellen Call Stack aus, ohne einen Fehler auszulösen. So können Sie nachvollziehen, wie eine Funktion erreicht wurde.

function inner() {
  console.trace("reached inner")
}
function outer() {
  inner()
}
outer()

Die stack-Eigenschaft eines Fehlers

Ein Error-Objekt enthält eine stack-Eigenschaft, die den Trace als Text enthält. Sie können ihn protokollieren oder an einen Dienst zur Fehlerberichterstattung senden.

const err = new Error("Something failed")
console.log(typeof err.stack)

Minifizierter Code und Source Maps

Produktionscode ist häufig minifiziert, wodurch Traces schwer verständlich werden. Source Maps übersetzen minifizierte Positionen zurück in Ihre Originaldateien, damit die Traces lesbar sind.

Vom Trace zur Lösung

Kombinieren Sie die Fehlermeldung, den obersten Stack Frame aus Ihrem Code und die Zeilennummer, um den Fehler zu lokalisieren. Untersuchen Sie anschließend dort die Variablen, um die Ursache zu bestätigen.

Kurztest

Testen Sie Ihr Wissen über Stack Traces.

Zusammenfassung

Zusammenfassung: Stack Traces zeigen den Weg zu einem Fehler.

Der oberste Stack Frame zeigt, wo der Fehler ausgelöst wurde
Die darunterliegenden Stack Frames zeigen die Aufrufer
Konzentrieren Sie sich auf den obersten Stack Frame in Ihrem eigenen Code
Source Maps machen minifizierte Traces lesbar

const err = new Error("fail")
console.log(typeof err.stack)

Häufig gestellte Fragen

Ist die Lektion „Stacktraces lesen“ kostenlos?

Ja — der vollständige Text von „Stacktraces lesen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Stacktraces lesen“?

Verfolgen Sie Fehler bis zu ihrer Quelle zurück. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Stacktraces lesen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy