JavaScript Mittelstufe Tag 7: Fehlerbehandlung & Debugging

Ziel dieses Tages

Heute lernst du:

• Wie du Fehler in JavaScript behandelst
• Verwendung von try...catch-Blöcken
• Debugging im Browser
• Häufige JavaScript-Fehler und wie man sie behebt

Am Ende wirst du Fehler erkennen und Code effektiv debuggen können.

Schritt 1: try...catch

Verwende try...catch, um Fehler sicher zu behandeln:

try {
  JSON.parse("invalid");
} catch (error) {
  console.log("Fehler erkannt!");
}

Erklärung:

• Der try-Block enthält Code, der Fehler werfen kann
• Der catch-Block wird ausgeführt, wenn ein Fehler auftritt
• Du kannst auf das Fehlerobjekt zugreifen, um Details zu erhalten

Schritt 2: Debugging im Browser

Nutze die Entwickler-Tools im Browser zum Debuggen:

• Konsole öffnen (F12 in Chrome)
• console.log() verwenden, um Variablen zu prüfen
• Breakpoints im „Sources“-Tab setzen

Schritt 3: Häufige Fehler

• SyntaxError: Code ist kein gültiges JavaScript
• ReferenceError: Variable ist nicht definiert
• TypeError: Falscher Datentyp für eine Operation

Übung

try {
  JSON.parse("invalid");
} catch (error) {
  console.log("Fehler erkannt!");
}

Aufgabe

Schreibe Code, der einen Fehler sicher behandelt:

function safeParse(json) {
  try {
    return JSON.parse(json);
  } catch (error) {
    console.log("Ungültiges JSON:", error.message);
    return null;
  }
}

// Beispiel
const data = safeParse('{"name": "John"}');
const badData = safeParse("invalid");