Dokumentation
JavaScript

JavaScript Fehlerbehandlung und Debugging

console.log, console.error, DevTools, Breakpoints, Fehlermeldungen und Stack Traces.

JavaScript Fehlerbehandlung und Debugging

console.log, console.error, DevTools, Breakpoints, Fehlermeldungen und Stack Traces. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

  • Fehler systematisch untersuchen
  • Konsole und Breakpoints nutzen
  • Stack Traces grundlegend lesen

Erklärung

Debugging bedeutet nicht raten, sondern Beobachtungen sammeln. Die Browser-Konsole zeigt Fehler, Warnungen und eigene Logs. Breakpoints stoppen Code an einer Stelle, damit Variablen geprüft werden können.

Ein Stack Trace zeigt, welche Funktionsaufrufe zum Fehler geführt haben. Die oberste relevante Zeile im eigenen Code ist oft der beste Startpunkt.

Beispiele

console.log("Formularwert:", email);
console.error("Speichern fehlgeschlagen", error);

Logs sollten konkrete Werte zeigen und nach der Fehlersuche wieder reduziert werden.

try {
  await saveProfile(profile);
} catch (error) {
  console.error(error);
  showError("Profil konnte nicht gespeichert werden.");
}

Technische Details gehören in die Konsole, verständliche Meldungen in die UI.

Typische Fehler

  • Fehlermeldungen nicht lesen und direkt Code ändern.
  • Alle Fehler mit leerem catch verschlucken.
  • Dauerhaft zu viele console.log im Produktivcode lassen.

Best Practices

  • Lies die erste konkrete Fehlermeldung genau.
  • Prüfe Werte vor der fehlerhaften Zeile.
  • Nutze Breakpoints bei komplexem Kontrollfluss.

Kleine Übung

Baue absichtlich einen Fehler in eine Funktion ein, lies den Stack Trace und notiere Datei, Zeile, Fehlertyp und Ursache.

Zusammenfassung

JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.

Weiterführende Seiten

Zuletzt aktualisiert: 7. Juni 2026

Best Practices

const bevorzugen, Namen, kleine Funktionen, globale Ordnung, DOM-Struktur und XSS vermeiden.

DOM Grundlagen

querySelector, getElementById, textContent, innerHTML, classList, style und Elemente erstellen.