KI-HTML systematisch bugfixen

KI-generiertes Markup hat einen überschaubaren Katalog typischer Fehler. Wer diese „üblichen Verdächtigen" kennt und ein festes Verfahren hat, findet die meisten Bugs in Minuten — statt blind im Code zu wühlen.

Das 5-Schritte-Verfahren

Reproduzieren & eingrenzen — was genau ist falsch, und auf welchem Element? Element-Picker drauf.
Funktioniert vs. kaputt trennen — ist es ein echter Bug oder nur verbose? Nicht an Kosmetik verlieren.
DevTools befragen — Styles-Panel (welche Regel gewinnt?), Box-Modell (Abstände), Konsole (Fehler?).
Hypothese testen — Wert direkt im Styles-Panel ändern und live sehen, ob es das war. Erst dann im Code fixen.
An der Wurzel fixen — nicht mit !important übermalen, sondern die Ursache beheben.

Die Bug-Galerie — die üblichen Verdächtigen

Wähl einen Bug und sieh Symptom, Ursache und Fix:

Symptom: Die Seite lässt sich seitlich scrollen, obwohl nichts erkennbar zu breit ist.

🐞 So sieht es im KI-Code aus

CSS

.box {
  width: 100%;
  padding: 24px;   /* kommt OBEN DRAUF */
}

✅ Der Fix

CSS

*, *::before, *::after {
  box-sizing: border-box;   /* padding zählt rein */
}

Warum: Mit dem Default content-box ergibt width: 100% + padding: 24px eine Box, die breiter als ihr Eltern-Element ist → Überlauf. border-box rechnet das padding ein. In den DevTools verrät sich der Übeltäter, wenn du am <body> hin und her klickst und die markierte Breite den Viewport übersteigt.

Warum eigentlich? — Warum zuerst in den DevTools fixen, nicht im Code?

Im Styles-Panel änderst du einen Wert und siehst das Ergebnis sofort, ohne Speichern/Neuladen. Das macht aus „ich glaube, es liegt am padding" ein 5-Sekunden-Experiment. Du verifizierst die Hypothese, bevor du die echte Datei anfasst — so fixt du die Ursache und nicht das nächstbeste Symptom. Übernimm die geänderte Zeile erst danach in den Quellcode.

Häufiger Denkfehler — Mit !important und Inline-Styles drübermalen

Wenn etwas „einfach nicht greift", ist die Versuchung groß, !important dranzuhängen oder ein Inline-style zu setzen. Das versteckt das Problem nur und erzeugt das nächste (jetzt greift die andere Regel nicht mehr). In KI-Code findest du oft schon Schichten solcher Pflaster. Schäl sie ab statt nachzulegen: das Styles-Panel zeigt dir per Durchstreichung, welche Regel von wem überschrieben wird.

Tiefer rein — Lass die KI gezielt debuggen — mit Kontext

Eine KI kann ihren eigenen Bug oft finden, wenn du ihr den beobachteten Effekt gibst, nicht nur den Code:

TEXT

"Dieses Element scrollt horizontal über den Viewport hinaus.
 Hier ist das HTML + CSS. Finde die Ursache, erkläre sie kurz,
 und gib NUR die minimale Änderung — kein Umbau, kein !important."

Wichtig: die minimale Änderung verlangen. Sonst baut die KI gern das halbe Layout neu und du hast einen neuen Satz Bugs.

← KI-HTML schnell lesen & verstehen Übungsaufgaben →