Dies ist eine alte Version des Dokuments!
LU07: Übungsaufgabe – Accordion debuggen
In dieser Aufgabe erhalten Sie ein absichtlich fehlerhaftes Accordion-Projekt. Ihre Aufgabe ist es, alle Fehler zu finden und zu beheben – ohne die Lösung nachzuschauen.
Vorgehen: Öffnen Sie die Dateien im Editor und im Browser. Schauen Sie nicht einfach den Code an – untersuchen Sie mit den Entwickler-Tools und mit den richtigen Werkzeugen (Webstorm/VS-Code + HTMHint etc).
Das Projekt
Das Projekt besteht aus drei Dateien:
| Datei | Inhalt |
|---|---|
index.html | Struktur des Accordions mit 4 Fragen |
style.css | Styling und Transitions |
script.js | Interaktivität (Öffnen/Schliessen) |
Erwartetes Verhalten (wenn alles korrekt ist):
- Die Seite sieht gestylt aus (Hintergrundfarbe, Abstände, Rahmen)
- Ein Klick auf eine Frage öffnet die Antwort mit Transition
- Ein zweiter Klick schliesst sie wieder
- Immer nur eine Antwort ist gleichzeitig offen
Aufgabe
Das Projekt enthält 5 absichtliche Bugs. Finden und beheben Sie alle.
Hinweise (ohne Lösungen)
| Bug | Symptom | Werkzeug |
|---|---|---|
| Bug 1 | Die Seite hat kein Styling – sie sieht aus wie reines HTML ohne CSS | Editor (WebStorm / HTMLHint) |
| Bug 2 | Die Buttons reagieren auf keinen Klick – keine Fehlermeldung in der Console | Editor + Console (console.log) |
| Bug 3 | Nach dem Beheben von Bug 1 und 2: Die Panels öffnen sich, aber mit keiner Transition / bleiben hängen | Editor (WebStorm / Stylelint) – Elements-Tab |
| Bug 4 | Die Panels lassen sich zwar öffnen, aber nicht mehr schliessen | Console – Logikfehler im Code |
| Bug 5 | Script wird ausgeführt bevor der Browser das HTML gelesen hat | Editor + Console |
Wichtig: Nicht alle Bugs erzeugen eine rote Fehlermeldung in der Console. Manche sind „lautlos“ – das macht sie schwieriger zu finden. Nutzen Sie console.log() und die Fehlermeldungen im Code-Editor.
Debugging-Protokoll
Füllen Sie für jeden gefundenen Bug das folgende Protokoll aus. Geben Sie es am Ende der Stunde ab.
| Schritt | Ihre Antwort |
|---|---|
| Bug Nr. | |
| 1. Beobachten – Was passiert genau? | |
| 2. Hypothese – Was könnte die Ursache sein? | |
| 3. Testen – Wie haben Sie es geprüft? (welches Tool, was haben Sie gemacht) | |
| 4. Fix – Was haben Sie geändert? |
Kopieren Sie diese Tabelle für jeden der 5 Bugs.
Hilfestellungen
Falls Sie nicht weiterkommen, gehen Sie diese Reihenfolge durch:
- Öffnen Sie den Editor und schauen Sie nach farbigen Unterwellungen
- Öffnen Sie die Console (F12) – gibt es Fehlermeldungen?
- Fügen Sie
console.log()an strategischen Stellen ein - Schauen Sie im Elements-Tab nach, ob CSS-Regeln durchgestrichen sind
- Prüfen Sie die Zeilennummer in der Fehlermeldung – klicken Sie darauf
Erinnerung an die Debugging-Reihenfolge:
1. Formatter / Linter → 2. Console → 3. Elements-Tab → 4. Breakpoints