Debugging mit den DevTools

CSS hat keine Fehlermeldungen. Eine ungültige Zeile wird still übersprungen, und die Seite sieht einfach falsch aus. Darum braucht man einen Ablauf statt Bauchgefühl.

Was du am Ende kannst

• die Bereiche Styles und Computed gezielt nutzen
• durchgestrichene und ungültige Regeln deuten
• Ladefehler im Netzwerk-Tab erkennen
• Fehler systematisch eingrenzen

Live-Coding zum Mitmachen

⤓ demo-11-debugging.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Der Ablauf

Rechtsklick auf das falsche Element → Untersuchen. Dann der Reihe nach:

Frage	Wo	Wenn nein
Ist das das richtige Element?	Elements	Selektieren, Struktur prüfen
Wird die Datei geladen?	Network, Status 200?	Pfad und Dateiname korrigieren
Taucht meine Regel auf?	Styles	Selektor falsch, Tippfehler in der Klasse
Ist sie gültig?	Styles: gelbes Warnzeichen, durchgestrichen	Tippfehler, fehlendes Semikolon
Gewinnt sie?	Styles: durchgestrichen ohne Warnzeichen	Spezifität prüfen
Was gilt am Ende?	Computed	von dort zur Regel springen
Wirkt die Eigenschaft hier?	Styles: Infosymbol	Eigenschaft passt nicht zum Element, etwa margin an inline

Die wichtigsten Werkzeuge

Styles zeigt alle Regeln für das Element, die wirksamste oben. Du kannst Häkchen setzen und Werte ändern, und mit den Pfeiltasten verändern sich Zahlen in Schritten.

Computed zeigt die berechneten Endwerte und das Box-Modell. Ein Klick auf den Pfeil führt zur Regel, die den Wert setzt.

:hov erzwingt Zustände wie :hover oder :focus, damit du sie in Ruhe untersuchen kannst.

Geräte-Symbol simuliert andere Bildschirmgrößen. Dazu mehr am Donnerstag.

Sources bzw. Changes: In Edge und Chrome listet der Tab Changes alle Änderungen, die du in den DevTools gemacht hast. So lassen sie sich in den Editor übertragen.

Die häufigsten Fehler

Symptom	Ursache
Gar kein CSS wirkt	falscher Pfad in link (404 im Netzwerk-Tab)
Eine Regel taucht nicht auf	Klassenname falsch geschrieben, auch Groß/Klein
Zwei Zeilen wirken nicht	fehlendes Semikolon
Regel durchgestrichen	spezifischere Regel gewinnt
Änderung wirkt nicht	nicht gespeichert oder alte Fassung im Cache: Strg+F5. Läuft der Server noch, und zwar im richtigen Ordner?
Variable wirkt nicht	Tippfehler im Namen
Elemente ragen heraus	box-sizing fehlt oder Breite + Rand größer als der Platz
Horizontaler Scrollbalken	ein zu breites Element: in der Konsole $$('*').filter(e => e.scrollWidth > innerWidth)

Eingrenzen

Wenn du nichts findest:

1. Setze testweise outline: 2px solid red: Wird das Element überhaupt getroffen und wo liegt es? outline verändert das Layout nicht.
2. Schalte in Styles Regeln einzeln aus.
3. Baue den Fehler in einer kleinen Testdatei nach. Oft löst sich das Problem dabei von selbst.

Live-Coding: Sechs Fehler jagen

Der Starter dieser Demo enthält die Website von vorhin, aber mit sechs eingebauten Fehlern, einer davon nur auf der Seite termine.html. Wir finden sie nach dem Ablauf, ohne vorher in den Code zu schauen. Der Ordner fertig zeigt den richtigen Stand.

Übung

Starter für die Übung

⤓ uebung-11-debugging.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kaputt.css, kaputt.html, kontakt.html, stil.css, termine.html

Die Seite kaputt.html beschreibt in jedem Absatz, wie er aussehen soll. Finde alle sechs Abweichungen.

Stufe 1: Fehler finden

Finde mindestens drei Fehler mit den DevTools. Korrigiere sie erst dort und dann in der Datei.

Stufe 2: Alle Fehler

Finde auch die übrigen. Notiere dir bei jedem, in welchem Bereich der DevTools du den Hinweis gefunden hast.

Für Schnelle

Warum zeigt var(--name, rot) einen Tippfehler im Variablennamen nicht mehr an? Baue das nach und überlege, wann ein Rückfallwert hilft und wann er schadet.