Debugging und Browser-DevTools

Inhalt

• Web-Inspector: Shortcuts
• Allgemeine Hinweise
• Darstellungsfehler
• Interaktionen nicht möglich
• Bilder nicht verfügbar

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“.

Allgemeine Hinweise

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

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

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

3. Hard-Reload bei Cache-Problemen: Manchmal zeigt der Browser eine veraltete Version deiner CSS- oder JS-Dateien an, obwohl du die Änderung bereits gespeichert hast. Das passiert, weil der Browser Dateien im Cache speichert, um die Seite schneller zu laden. Ein Hard-Reload umgeht diesen Cache und lädt alle Dateien frisch vom Server. Die Shortcuts dafür findest du in der Tabelle oben.

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

Darstellungsfehler

Wenn ein Element falsch positioniert ist, die falsche Farbe hat oder gar nicht erscheint, ist der Element-Inspektor das richtige Werkzeug.

Element untersuchen

1. Mache einen Rechtsklick auf das betroffene Element auf der Seite und wähle Element untersuchen (bzw. Inspect). Der Inspektor öffnet sich und markiert das entsprechende HTML-Element direkt im Code. Auf der rechten Seite siehst du im Bereich Styles alle CSS-Regeln, die auf dieses Element angewendet werden – von der spezifischsten bis zur allgemeinsten.

   Alternativ kannst du die Elementauswahl nutzen: Aktiviere sie über den Shortcut aus der Tabelle oben oder über das Pfeil-Symbol oben links in den DevTools, und klicke dann direkt auf ein beliebiges Element auf der Seite – der Inspektor springt automatisch zum passenden HTML-Element.

2. Du kannst CSS-Werte direkt in den DevTools bearbeiten, zum Beispiel display, color oder margin. Die Änderungen sind temporär und verschwinden beim Neuladen – sie helfen dir aber, schnell zu prüfen, ob du auf der richtigen Spur bist.

3. Fehlerhaften CSS-Selektor erkennen: Wenn eine CSS-Regel gar nicht greift, liegt es häufig am Selektor. Im Styles-Panel erkennst du das daran, dass die Regel entweder gar nicht auftaucht oder durchgestrichen dargestellt wird. Durchgestrichene Regeln wurden von einer spezifischeren Regel überschrieben.

4. Prüfe im Inspektor den genauen Klassennamen und die HTML-Struktur des Elements. Häufige Fehler sind:

   • Tippfehler im Klassennamen – im HTML steht .hauptnavigation, im CSS steht .haupt-navigation
   • Falscher Selektor-Typ – du verwendest #id statt .klasse
   • Falsche Verschachtelung – der Selektor .container p greift nicht, weil das <p> gar kein Kind von .container ist

Interaktionen nicht möglich

Wenn ein Button nichts tut, ein Formular nicht abgesendet werden kann oder JavaScript-gesteuerte Inhalte fehlen, gibt die Browser-Konsole den entscheidenden Hinweis.

JS-Fehler in der Konsole finden

1. Öffne den Tab Console in den DevTools. Lade die Seite neu und führe die fehlerhafte Interaktion aus. Fehlermeldungen erscheinen in Rot. Sie enthalten meistens:

   • Eine Beschreibung des Fehlers, zum Beispiel TypeError: Cannot read properties of null
   • Die Datei und die Zeilennummer, in der der Fehler auftritt – klicke darauf, um direkt zum Code zu springen

2. Lese die Fehlermeldung genau. Oft steckt in ihr bereits die Lösung: null bedeutet, dass ein Element nicht gefunden wurde; is not a function bedeutet, dass ein Methodenname falsch geschrieben wurde.

Mit console.log Schritt für Schritt debuggen

1. Wenn kein Fehler erscheint, der Code aber trotzdem nicht das Richtige tut, hilft console.log(). Füge an verschiedenen Stellen in deinem JavaScript Log-Ausgaben ein, um zu prüfen, ob der Code überhaupt ausgeführt wird und welche Werte Variablen haben:

   function berechneErgebnis(zahl) {
     console.log("Funktion wurde aufgerufen mit:", zahl);
     const ergebnis = zahl * 2;
     console.log("Ergebnis:", ergebnis);
     return ergebnis;
   }

2. Arbeite dich von außen nach innen vor: Prüfe zuerst, ob die Funktion überhaupt aufgerufen wird, dann ob die Parameter stimmen, dann ob Zwischenergebnisse korrekt sind.

Bilder nicht verfügbar

Wenn ein Bild nicht geladen wird und nur ein defektes Bild-Symbol erscheint, ist in den meisten Fällen der Dateipfad oder der Dateiname falsch.

404-Fehler in der Konsole finden

1. Öffne den Tab Console oder den Tab Network in den DevTools und lade die Seite neu. Ein fehlendes Bild erscheint als roter 404-Fehler. Die Meldung zeigt dir den genauen Pfad, den der Browser versucht hat aufzurufen – vergleiche diesen Pfad mit dem tatsächlichen Speicherort der Datei auf deinem Server.

Häufige Fehlerquellen

1. Umlaute und Sonderzeichen im Dateinamen: Dateinamen mit ä, ö, ü, ß oder Leerzeichen führen auf Servern regelmäßig zu Problemen. Benenne Dateien grundsätzlich mit Kleinbuchstaben, Zahlen und Bindestrichen – also mein-bild.jpg statt Mein Bild (2).jpg.

2. Falscher Dateipfad: Achte darauf, ob der Pfad relativ oder absolut ist. bilder/foto.jpg sucht die Datei relativ zur aktuellen HTML-Datei. /bilder/foto.jpg sucht sie vom Wurzelverzeichnis des Servers aus. Prüfe, ob die Ordnerstruktur auf dem Server tatsächlich so aufgebaut ist.

3. Datei nicht hochgeladen: Die häufigste Ursache überhaupt. Die Datei existiert lokal auf deinem Rechner, wurde aber nie auf den Server übertragen. Prüfe in deinem FTP-Programm, ob die Datei tatsächlich vorhanden ist.

4. Groß- und Kleinschreibung: Auf macOS und Windows sind Dateinamen oft unabhängig von Groß- und Kleinschreibung. Server unter Linux unterscheiden jedoch zwischen Foto.jpg und foto.jpg. Im Zweifelsfall immer alles kleinschreiben.

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