KI-generierten Code debuggen

🔄 Kurzer Rueckblick: In der letzten Lektion hast du eine komplette App Schritt fuer Schritt gebaut und nach jedem Feature committet. Diese Commits werden dein Sicherheitsnetz in dieser Lektion — du kannst immer zu einem funktionierenden Stand zurueckrollen.

Dinge werden kaputtgehen. Das ist kein Versagen von Vibe Coding — es ist ein normaler Teil von Softwareentwicklung. Der Unterschied zwischen jemandem der aufgibt und jemandem der shipped: wissen wie man Dinge schnell repariert.

Das Debugging-Mindset

Wenn etwas kaputtgeht, widerstehe zwei Impulsen:

Nicht in Panik geraten und alles loeschen. Das Problem ist meistens eine kleine Sache.
Nicht “fix das” ohne Kontext pasten. Du bekommst eine Vermutung, keinen Fix.

Stattdessen: Fehler lesen, verstehen was kaputtgegangen ist, und der KI spezifische Informationen geben.

Schritt 1: Den Fehler lesen

Die meisten Fehler sagen dir genau was falsch ist. Du musst sie nur finden.

Browser-Konsolen-Fehler

Oeffne die Entwicklertools deines Browsers (F12 oder Rechtsklick → Untersuchen → Konsole):

Fehlertyp	Was er bedeutet	Beispiel
TypeError	Code versucht etwas zu nutzen das nicht existiert	`Cannot read property 'map' of undefined`
SyntaxError	Code hat einen Tippfehler oder Strukturproblem	`Unexpected token '}'`
ReferenceError	Variable benutzt die nie definiert wurde	`bookmarks is not defined`
NetworkError	Verbindung zu Server oder API fehlgeschlagen	`Failed to fetch`

Fehler mit der KI teilen

Schlecht:

“Meine App ist kaputt”

Gut:

“Wenn ich den ‘Lesezeichen hinzufuegen’-Button klicke, zeigt die Browser-Konsole: TypeError: Cannot read property 'map' of undefined in Zeile 42 von BookmarkGrid.jsx. Der Fehler startete nachdem ich die Tag-Filterung hinzugefuegt habe.”

Gib an: Welche Aktion den Fehler ausloest, die exakte Fehlermeldung, welche Datei und Zeile, und welche Aenderung ihn verursacht hat.

✅ Quick Check: Die Browser-Konsole zeigt ReferenceError: tags is not defined in Zeile 15. Ohne den Code anzuschauen — was ist wahrscheinlich das Problem? (Antwort: Zeile 15 nutzt eine Variable namens tags die nie erstellt oder importiert wurde. Die KI hat wahrscheinlich eine Variable aus einer anderen Datei referenziert ohne sie zu importieren, oder sie bei einem Refactoring umbenannt. Der Fix: Finden wo tags herkommen sollte und es importieren oder definieren.)

Schritt 2: Die Rollback-Strategie

Wenn du nach jedem Feature committet hast (wie in der letzten Lektion gelernt), hast du Checkpoints:

Commit 1: Layout ✓ (funktioniert)
Commit 2: Lesezeichen hinzufuegen ✓ (funktioniert)
Commit 3: Tag-Filterung ✓ (funktioniert)
Commit 4: Suche ✗ (etwas kaputtgemacht)

Rolle zurueck zu Commit 3. Layout, Lesezeichen und Tags funktionieren noch. Jetzt probiere die Suche nochmal mit frischem Ansatz.

Im Code-Editor (Cursor/Claude Code):

git log --oneline       # deine Commits sehen
git checkout [commit]   # zu einem funktionierenden Stand zurueck

In Lovable/Bolt.new: Nutze die eingebaute Versionshistorie um eine fruehere funktionierende Version wiederherzustellen.

Faustregel: Wenn du 15 Minuten debuggst und es wird schlimmer, rolle zurueck. Ein Feature von einem funktionierenden Stand nochmal bauen ist schneller als kaskadierender Bugs zu entwirren.

Schritt 3: Das frische Gespraech

Wenn die KI Dinge immer schlimmer macht, ist das Problem oft Context Poisoning:

Die KI machte einen Fehler in Nachricht 5
Nachrichten 6-10 referenzieren den Fehler als waere er korrekt
Jeder “Fix” baut auf einem kaputten Fundament

Loesung: Starte ein komplett neues Gespraech. Enthaelt:

Ich baue einen Lesezeichen-Manager mit [Tech-Stack].
Hier ist mein aktuell funktionierender Code: [relevante Datei einfuegen]
Ich muss Such-Funktionalitaet hinzufuegen.
Vorheriger Versuch hat die Tag-Filterung kaputtgemacht.
Hier ist der Fehler den ich bekam: [Fehler einfuegen]
Bitte implementiere die Suche OHNE die Tag-Filterung-Logik zu veraendern.

Der frische Kontext bedeutet dass die KI keine fruehere Verwirrung mitschleppt.

Haeufige Vibe-Coding-Bugs

Symptom	Wahrscheinliche Ursache	Fix
Leere Seite	JavaScript-Fehler verhindert Rendering	Konsole pruefen, spezifischen Fehler fixen
Styling kaputt	CSS-Konflikt oder fehlende Klasse	KI nach doppelten Klassennamen fragen
Feature geht nicht mehr	Neuer Code hat alten ueberschrieben	Aktuelle Datei mit letztem Commit vergleichen
Daten verschwinden beim Reload	Nicht gespeichert in Storage/Datenbank	localStorage- oder Datenbank-Schreibvorgaenge pruefen
Button tut nichts	Event Handler nicht verbunden	KI bitten onClick/onSubmit-Verkabelung zu pruefen
Endlos-Ladescreen	API-Aufruf scheitert leise	Network-Tab in den Entwicklertools pruefen

Das Debugging-Prompt-Template

Wenn du die KI bittest etwas zu fixen, nutze diese Struktur:

BUG-REPORT:
Was ich erwartet habe: [gewuenschtes Verhalten beschreiben]
Was tatsaechlich passiert: [tatsaechliches Verhalten beschreiben]
Fehlermeldung: [exakte Fehlermeldung aus der Konsole]
Datei und Zeile: [falls im Fehler sichtbar]
Wann es angefangen hat: [welche Aenderung den Bug eingefuehrt hat]

WICHTIG: Aendere nur den Code der noetig ist um diesen Bug zu fixen.
Refactore oder aendere keinen unbetroffenen Code.

Die letzte Zeile ist entscheidend — ohne sie koennte die KI “hilfreich” funktionierenden Code refactoren waehrend sie den Bug fixt und dabei neue Probleme erzeugen.

Key Takeaways

Lies immer die tatsaechliche Fehlermeldung bevor du die KI bittest etwas zu fixen
Gib spezifischen Kontext: Was du erwartet hast, was passiert ist, den Fehler und welche Aenderung ihn verursacht hat
Rolle nach 15 Minuten erfolglosem Debugging zu deinem letzten funktionierenden Commit zurueck
Starte frische Gespraeche wenn der Kontext vergiftet ist (mehrere fehlgeschlagene Fix-Versuche)
Beende jeden Fix-Prompt mit “Aendere nur was fuer diesen Fix noetig ist — aendere keinen unbetroffenen Code”
Die Browser-Konsole und Versionskontrolle sind deine zwei wichtigsten Debugging-Tools

Up Next

In der naechsten Lektion lernst du wie du deinen Vibe-Coded-Prototypen produktionsreif machst — die Luecke ueberbruecken zwischen “laeuft auf meinem Rechner” und “laeuft fuer echte Nutzer.”