LU07: Debugging – Fehler finden und verstehen

Debugging bedeutet, mit dem Browser oder dem Code-Editor zu Spuren des Fehlers nachzuforschen – mit den richtigen Werkzeugen, in der richtigen Reihenfolge.

Viele Anfänger raten, was falsch sein könnte. Debugging ist das Gegenteil: Sie prüfen Fakten.

Eine gute Debugging-Gewohnheit folgt immer dieser Reihenfolge:

Oft passiert beim Debugging gar nichts: keine Fehlermeldung, kein Hinweis. Das macht es schwierig. Deshalb brauchen Sie die richtigen Werkzeuge.

Nicht jedes Werkzeug hilft bei jedem Fehler. Gehen Sie diese Reihenfolge durch:

Bevor Sie die DevTools öffnen: Schauen Sie in den Code-Editor. Viele Fehler können gefunden werden, bevor der Code überhaupt im Browser läuft.

WebStorm prüft den Code automatisch im Hintergrund – ohne zusätzliche Extensions. Farbige Unterwellungen bedeuten:

• Rot → Fehler (der Code wird nicht korrekt ausgeführt)
• Gelb → Warnung (sollte behoben werden)
• Grau → Hinweis (Stil-Empfehlung)

WebStorm Code mit Fehleranzeige.

Fahren Sie mit der Maus über die Markierung – Sie sehen eine Erklärung des Problems.

WebStorm erkennt unter anderem:

• Fehlende Dateiendungen: <link href=„style“> → Cannot resolve file 'style'
• Falsche Anführungszeichen: <link href=„style.css“> → Cannot resolve file '„style.css„'
• Tippfehler in CSS-Eigenschaften: heihgt → unbekannte Eigenschaft

Mit Ctrl+Alt+L (Windows) / Cmd+Alt+L (Mac) formatieren Sie die ganze Datei (alles wird schön ausgerichtet).

Für VS Code brauchen Sie zwei separate Extensions, um dasselbe Niveau wie WebStorm zu erreichen:

Prettier formatiert den Code automatisch beim Speichern (Einrückung, Strukturierung):

1. Extensions-Tab öffnen (Ctrl+Shift+X / Cmd+Shift+X)
2. Suchen: Prettier – Code formatter, installieren
3. Settings öffnen (Ctrl+, / Cmd+,), suchen nach format on save, Checkbox aktivieren

Ab jetzt: Ctrl+S / Cmd+S → Code wird automatisch aufgeräumt und eingerückt.

HTMLHint prüft die HTML-Struktur und meldet typische Fehler wie falsche Anführungszeichen:

1. Suchen: HTMLHint, installieren
2. Keine weitere Konfiguration nötig – funktioniert sofort
3. Website mit Dokumentation aller Regeln: htmlhint.com

Falsche Anführungszeichen (WebStorm & HTMLHint):

<!-- ❌ Typografische Anführungszeichen aus Word oder Moodle – Browser lädt die Datei nicht -->
<link href=„style.css" rel=„stylesheet">
 
<!-- ✅ Gerade Anführungszeichen -->
<link href="style.css" rel="stylesheet">

Tippfehler in CSS-Eigenschaften (WebStorm & VS Code):

/* ❌ 'heihgt' statt 'height' – Browser ignoriert diese Zeile einfach, kein Console-Fehler */
.panel.open {
  heihgt: auto;
  opacity: 1;
}
 
/* ✅ Korrekt */
.panel.open {
  height: auto;
  opacity: 1;
}

Dieser Fehler ist besonders tückisch: das Accordion-Panel öffnet sich visuell nicht, obwohl das JavaScript korrekt funktioniert. Die Console zeigt keinen Fehler.

Die Console ist der direkte Draht zum laufenden JavaScript-Code. Öffnen Sie sie mit F12 → Console.

Fehlermeldungen sehen einschüchternd aus, bedeuten aber meist eines von wenigen Dingen:

Die Fehlermeldung enthält immer eine Zeilennummer – klicken Sie darauf, um direkt zur betroffenen Stelle zu springen.

console.log() schreibt Werte in die Console. So sehen Sie, was Ihr Code gerade „denkt“.

// ❌ Wenig hilfreich – was ist das genau?
console.log(buttons);
 
// ✅ Mit Label – sofort lesbar
console.log('buttons:', buttons);
console.log('Anzahl gefundene Buttons:', buttons.length);
 
 
// ✅ Fehler bewusst kennzeichnen (erscheint rot in der Console)
console.error('Kein Element gefunden für Selector:', selector);

Hier ein typischer Fehler aus dem Accordion-Projekt:

// ❌ Fehler: 'e' wurde im EventListener nicht deklariert
buttons.forEach((button) => {
  button.addEventListener('click', () => {   // ← 'e' fehlt als Parameter
    const panelElement = e.target.nextElementSibling;
    // ...
  });
});

// ✅ Korrekt: 'e' als Parameter deklariert
buttons.forEach((button) => {
  button.addEventListener('click', (e) => {  // ← 'e' als Parameter
    const panelElement = e.target.nextElementSibling;
    // ...
  });
});

<!-- ❌ Script im <head> – HTML ist noch nicht geladen wenn JS läuft -->
<!-- → document.querySelectorAll('.accordion-btn') gibt null zurück -->
<!DOCTYPE html>
<html>
<head>
  <script src="script.js"></script>  <!-- zu früh! -->
</head>
<body>
  <button class="accordion-btn">Frage 1</button>
</body>
</html>
 
<!-- ✅ Script am Ende von <body> – HTML ist vollständig geladen -->
<!DOCTYPE html>
<html>
<head>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <button class="accordion-btn">Frage 1</button>
 
  <script src="script.js"></script>  <!-- ← hier -->
</body>
</html>

Wenn document.querySelector(…) null zurückgibt, obwohl das Element im HTML vorhanden ist, ist dies die häufigste Ursache.

Der Elements-Tab zeigt, was der Browser tatsächlich aus Ihrem Code gemacht hat – nicht was Sie geschrieben haben, sondern was nach dem Parsen und Rendern übrig bleibt.

Workflow:

1. Elements-Tab öffnen (F12 → Elements)
2. Rechts: Styles-Panel
3. Eigenschaft anklicken und Wert ändern
4. Sofortiges Feedback – ohne die Datei zu speichern

Wenn der Look stimmt: dann erst in die CSS-Datei übertragen.

Wenn height: auto im CSS steht, aber die Transition nicht funktioniert:
→ Computed-Tab öffnen → dort steht der berechnete Pixelwert.

Das erklärt, warum transition: height auf auto nicht direkt funktioniert – der Browser kennt den Zielwert nicht. (Lösung: interpolate-size: allow-keywords;)

Dieses Format hilft, strukturiert vorzugehen – und aus Fehlern zu lernen. Füllen Sie es aus, wenn Sie einen Bug gefunden haben: