CSS mit dem Seiteninspektor untersuchen
In diesem Tutorial lernen Sie, wie Sie mit dem Seiteninspektor des Browsers HTML-Elemente und ihre CSS-Eigenschaften untersuchen können. Dies hilft Ihnen, unerwarteten oder fehlerhaften Formatierungen auf den Grund zu gehen und diese zu beseitigen.
Seiteninspektor aktivieren
In jedem Browser können Sie durch F12 oder einen Rechtsklick mit der Maus ein
Kontextmenü öffnen, das eine Ansicht des Quelltexts
(des HTML-Dokuments), bzw. eine Untersuchung des betreffenden Elements erlaubt.
DOM inspizieren
Im Seiteninspektor wird das DOM einer Seite gezeigt. Hier werden nicht nur die HTML-Elemente, sondern auch Pseudoelemente und sogar das Shadow DOM (z.B. bei einem audio- oder input-Element) angezeigt.
Anwendungsbeispiele
falsch geschlossener br-Tag
Dieses Beispiel wurde als Frage im SelfHTML-Forum gestellt, da der Zeilenumbruch größer als gewohnt war.
Beispiel
Dies ist ein Text
br> mit einem Zeilenumbruch.
br
ist ein inhaltsleeres
Element, das normalerweise nicht geschlossen werden muss. Ein Blick in den Seiteninspektor zeigt, dass der schließende
br
-Tag als zweites br
-Element geparst wurde.
Blockelemente in p
Ein weiterer typischer Fehler ist das Einfügen von Blockelementen wie div innerhalb von Textabsätzen.
p { color: green; } div { color: red; }
Dies ist ein Text
mit einem div div> und noch etwas Text.Der Textabsatz wird unerklärlicherwiese in 3 Blöcken dargestellt. Die Farbzuweisung für
p
wird nur im ersten Teil ausgeführt, aber nicht im letzten.Ein Blick in den Seiteninspektor zeigt, dass das
p
-Element vor dem neuendiv
geschlossen wird, da es keine Blockelemente als Kinder enthalten darf. Unterhalb desdiv
wird plain text ohne Formatierung ausgegeben, da es kein Start-Tag gibt. Das schließendep
-Tag wird als weiterer, jedoch leerer Absatz geparst.
![]()
Parsen fehlender Elemente
Dieser Beitrag aus dem SelfHTML-Forum beschreibt Probleme, die durch das Weglassen nicht notwendiger Elemente entstehen können.
Wenn Sie die
head
- undbody
-Tags weglassen, werden die Elemente implizit trotzdem erstellt. Im Traversieren im DOM-Baum bei DOM-Manipulationen kann es hier zu Problemen führen, wenn Elemente entgegen der Notation im Markup keine Kindelemente sind.Mit dem Seiteninspektor arbeiten
Die Älteren unter uns werden sich noch erinnern. Zuerst wird die Webseite in einem Code-Editor bearbeitet, dann gespeichert; nun wird ein Browser geöffnet und das Zwischenergebnis betrachtet. Ausgehend von diesem Zwischenergebnis wird nun wieder der Code-Editor geöffnet - etwas geändert und der Kreislauf des Speichern, Testens und erneuten Änderns beginnt von vorn. Mit dem Seiteninspektor können Sie dies nun bequem und komfortabel im Browser erledigen.
HTML bearbeiten
Durch einen Rechtsklick auf das geparste Markup öffnet sich ein Kontextmenü, mit dem Sie das Markup ändern und neue HTML-Elemente sowie Inhalte hinzufügen können.
![]()
CSS bearbeiten
Das Layouten von Webseiten geht sogar noch einfacher. Durch einen Klick in das rechte, untere Feld können Sie
- CSS-Werte verändern
- neue CSS-Eigenschaften hinzufügen
und die Änderungen gleich sehen. Wenn das Layout passt, können Sie die ermittelten Eigenschaften und Werte in den Code-Editor kopieren und speichern.
Fazit
Durch browsereigene Tools wie den Seiteninspektor können Sie große Teile des Entwickelns und Debuggens direkt im Browser erledigen und benötigen keine externen Programme mehr. Dies ist eine große Vereinfachung und Zeitersparnis.
p
soll grüne, ein mitdiv
gekennzeichneter Bereich jedoch rote Textfarbe erhalten.