Browser-Entwicklertools verwenden

Browser-Entwicklertools sind integrierte Werkzeuge zum Analysieren und Debuggen von Webseiten. Diese Tools ermöglichen das Inspizieren von HTML-Code, das Bearbeiten von CSS-Stilen und das Überwachen der Netzwerkaktivität direkt im Browser.

1. Entwicklertools öffnen. Drücke F12 oder verwende die Tastenkombination Strg+Shift+I (Windows/Linux) bzw. Cmd+Option+I (Mac). Alternativ klicke mit der rechten Maustaste auf eine Webseite und wähle 'Element untersuchen' oder 'Untersuchen' aus dem Kontextmenü.
2. Elements-Tab verwenden. Im Elements-Tab siehst du den HTML-Code der Seite. Klicke auf HTML-Elemente, um sie im DOM-Baum zu erweitern. Bewege die Maus über Elemente, um sie auf der Seite hervorzuheben. Mit Doppelklick auf Attributwerte oder Texte kannst du diese direkt bearbeiten.
3. CSS-Styles bearbeiten. Wähle ein Element aus und betrachte das Styles-Panel auf der rechten Seite. Klicke auf CSS-Eigenschaften, um Werte zu ändern. Füge neue Eigenschaften hinzu, indem du in einen leeren Bereich klickst. Deaktiviere Eigenschaften durch Klick auf das Kontrollkästchen neben dem Eigenschaftsnamen.
4. Console-Tab nutzen. Öffne den Console-Tab, um JavaScript-Befehle auszuführen und Fehlermeldungen zu sehen. Gib JavaScript-Code direkt ein und drücke Enter zur Ausführung. Die Console zeigt auch console.log()-Ausgaben und Fehlermeldungen von der aktuellen Seite an.
5. Network-Tab überwachen. Klicke auf den Network-Tab und lade die Seite neu (F5), um alle Netzwerkanfragen zu sehen. Klicke auf einzelne Anfragen, um Details wie Header, Response und Timing zu betrachten. Nutze die Filter-Buttons oben, um nach Dateitypen (JS, CSS, Images) zu filtern.
6. Sources-Tab für Debugging. Im Sources-Tab findest du alle geladenen Dateien der Webseite. Klicke auf JavaScript-Dateien, um den Code zu betrachten. Setze Breakpoints durch Klick auf die Zeilennummern. Wenn der Code ausgeführt wird, pausiert der Browser an diesen Stellen zur Fehlersuche.
7. Responsive Design testen. Klicke auf das Handy-Symbol in der Toolbar oder drücke Strg+Shift+M, um den Device-Modus zu aktivieren. Wähle aus der Dropdown-Liste verschiedene Gerätegrößen aus oder gib custom Abmessungen ein. Verwende die Orientierungs-Buttons, um zwischen Hoch- und Querformat zu wechseln.