Debugging
Fehler finden ist eine Kernkompetenz: Konsole lesen, Breakpoints setzen, Hypothesen prüfen.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Fehlermeldungen lesen
TypeError, ReferenceError und SyntaxError sagen, WAS schiefging.
Der Stack Trace sagt, WO.
Die oberste Zeile des Traces mit eigener Datei ist meist der beste Startpunkt.
Breakpoints
debugger hält die Ausführung an, wenn die DevTools offen sind.
Im Sources-Panel lässt sich der Zustand jeder Variablen inspizieren und Schritt für Schritt weiterlaufen.
function berechnePunkte(antworten) {
debugger; // haelt hier an
return antworten.filter((a) => a.korrekt).length * 10;
}Konsole gezielt nutzen
console.table zeigt Arrays von Objekten übersichtlich, console.error hebt Fehler hervor.
console.time und console.timeEnd messen Laufzeiten.
Vertiefung
Fehler eingrenzen statt raten
Lies die Fehlermeldung von oben: Typ, Nachricht und die erste Zeile im eigenen Code. TypeError bedeutet oft, dass ein Wert undefined ist oder eine Methode nicht existiert.
Reproduziere den Fehler mit kleinen Eingaben, ändere genau eine Sache und prüfe erneut. debugger, Breakpoints und gezielte console.log-Ausgaben sind besser als blindes Ändern.
const user = null;
console.log(user.name);
// TypeError: Cannot read properties of null (reading "name")
console.log(user?.name ?? "Unbekannt"); // sicherMerksatz: Erst beobachten, dann ändern. Optionale Verkettung verhindert viele null-Fehler, aber nicht jede Logik.
Übungsaufgabe
Drei Bugs finden
Repariere ein Programm mit drei Fehlern: einem null-Zugriff, einer falschen Schleifengrenze und einer fehlenden Rückgabe.
Das soll dein Programm können
- Null-Zugriff absichern
- Schleife korrigieren
- Rückgabe ergänzen
- Erwartete Ausgabe prüfen
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Der letzte gültige Index ist length - 1. Ohne return ist das Ergebnis undefined. user ist null.
Lösung anzeigen
function summe(werte = []) {
let sum = 0;
for (let i = 0; i < werte.length; i++) {
sum += werte[i];
}
return sum;
}
const user = null;
console.log(user?.name ?? "Unbekannt");
console.log(summe([1, 2, 3])); // 6Warum funktioniert das?
Die Schleife lief einen Schritt zu weit, die Funktion gab nichts zurück und user war null. Alle drei Fehler werden durch kleine, gezielte Änderungen behoben.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.