Debugging und Browser-DevTools

Beim Debuggen hilft ein fester Ablauf. So vermeidest du Zufall und findest schneller heraus, warum etwas nicht funktioniert.

So gehst du beim Debuggen vor

1. Problem kurz benennen: Schreibe in einem Satz auf, was genau falsch ist. Zum Beispiel: „Der Button ist unsichtbar“ oder „Das Bild wird nicht geladen“.

2. Inspector nutzen: Öffne die DevTools mit Rechtsklick auf das betroffene Element und „Untersuchen“. Prüfe HTML-Struktur, Klassenname und aktive CSS-Regeln im Bereich „Styles“.

3. Im Inspector live testen: Ändere einzelne CSS-Werte direkt in den DevTools, zum Beispiel display, width oder margin. So siehst du sofort, ob du auf der richtigen Spur bist.

4. Network prüfen: Wechsle in den Tab „Network“ und lade die Seite neu. Achte auf 404-Fehler. Das bedeutet fast immer: falscher Pfad, falscher Dateiname oder falsche Endung.

5. Lighthouse starten: Führe einen Test für „Performance“, „Accessibility“ und „Best Practices“ aus. Suche dir danach die wichtigsten ein bis drei Hinweise aus und behebe diese zuerst.

6. Performance-Panel nutzen: Wenn die Seite langsam wirkt, mache eine Aufnahme im Tab „Performance“. Schaue auf lange Ausschläge und teste danach gezielt eine einzelne Verbesserung.

7. Immer nur eine Änderung: Ändere nie viele Dinge auf einmal. Nach jeder Änderung neu testen. So erkennst du klar, was geholfen hat.

Merksatz: Erst beobachten, dann messen, dann gezielt ändern.

VS Code Cheat-Sheet

Für den praktischen Workflow in Visual Studio Code gibt es eine eigene Übersicht mit den wichtigsten Features und Shortcuts für macOS und Windows.

Zum VS Code Cheat-Sheet

Web-Inspector: Anweisungen und Shortcuts

Für viele Fehler ist der Web-Inspector der schnellste Weg zur Lösung. Nutze zuerst den Element-Inspektor, dann die Konsole und anschließend das Network-Panel.

Hinweis für Safari: Aktiviere zuerst „Entwickler-Menü anzeigen“ in den Safari-Einstellungen unter „Erweitert“.