So untersuchen Sie ein Element in Chrome, Firefox, Safari und Edge

Um ein Element zu untersuchen, klicken Sie in Chrome, Firefox oder Edge mit der rechten Maustaste darauf und wählen Sie „Untersuchen “. In Safari müssen Sie zunächst die Entwicklerfunktionen aktivieren, dann mit der rechten Maustaste oder bei gedrückter Ctrl-Taste klicken und „Element untersuchen“ auswählen . Der Browser öffnet daraufhin seine Tools und wählt das Element in der Live-Dokumentstruktur aus. Chrome und Edge nennen dieses Bedienfeld „ Elemente“ , Firefox „Inspektor “ und Safari „Web-Inspektor“ .

Ein Element in Chrome untersuchen

1. Öffnen Sie die Seite in Chrome und suchen Sie den Text, das Bild, den Link oder das Steuerelement, das Sie untersuchen möchten.
2. Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie „Untersuchen“ .
3. Suchen Sie im Elementbereich die ausgewählte Zeile im DOM-Baum. Im Stilbereich werden die CSS-Regeln angezeigt, die diesen Knoten betreffen.

Alternativ können Sie das Drei-Punkte-Menü von Chrome verwenden: Weitere Tools > Entwicklertools . Tastenkombinationen: F12 oder Strg+Umschalt+I (Windows/Linux) und Befehl+Wahltaste+I (Mac). Drücken Sie Strg+Umschalt+C oder Befehl+Umschalt+C, um Elements im Seitenauswahlmodus zu öffnen.

Untersuchen Sie ein Element in Microsoft Edge

1. Öffnen Sie die Seite in Edge und klicken Sie mit der rechten Maustaste auf das gewünschte Element.
2. Wählen Sie „Untersuchen“ . Edge öffnet die Entwicklertools, wobei der entsprechende Knoten in „Elemente“ ausgewählt ist.

Alternativ können Sie „Einstellungen und mehr (…)“ > „Weitere Tools“ > „Entwicklertools“ auswählen . Drücken Sie F12 oder Strg+Umschalt+I (Windows/Linux) bzw. Befehl+Wahl+I (Mac), um das letzte Entwicklertools-Fenster erneut zu öffnen. Benutzerdefinierte Tastenkombinationen können abweichen.

Ein Element in Firefox untersuchen

1. Öffnen Sie die Seite in Firefox und klicken Sie mit der rechten Maustaste auf das Element, das Sie untersuchen möchten.
2. Wählen Sie „Untersuchen“ . Firefox öffnet den Inspektor mit dem ausgewählten Element.
3. Erweitern Sie die Pfeile der Baumstruktur, um untergeordnete Elemente anzuzeigen, oder wählen Sie eine andere Zeile aus, um einen anderen Teil der Seite zu untersuchen.

Öffnen Sie die Entwicklertools mit F12 oder Strg+Umschalt+I (Windows/Linux) bzw. Befehl+Wahltaste+I (Mac). Strg+Umschalt+C oder Befehl+Wahltaste+C öffnet den Inspektor. Falls eine Website das Kontextmenü (Rechtsklickmenü) ersetzt, verwenden Sie eine Tastenkombination oder das Firefox-Menü.

Ein Element in Safari untersuchen

1. In Safari auf dem Mac wählen Sie in der Menüleiste Safari > Einstellungen .
2. Öffnen Sie die erweiterten Einstellungen und aktivieren Sie die Option „Funktionen für Webentwickler anzeigen“ . In Safari 16 und älteren Versionen heißt diese Einstellung „Entwicklermenü in der Menüleiste anzeigen“ .
3. Kehren Sie zur Seite zurück, klicken Sie dann mit der rechten Maustaste oder bei gedrückter Strg-Taste auf das Element und wählen Sie „ Element untersuchen“ .

Der Web-Inspektor wählt das angeklickte Element aus. Alternativ können Sie „Entwicklertools“ > „Web-Inspektor einblenden“ wählen oder die Tastenkombination Option+Befehl+I drücken , um ihn für die aktuelle Seite zu öffnen. Diese Schritte gelten für Safari auf dem Mac.

Was tun, nachdem sich das Panel geöffnet hat?

Finde das passende HTML-Element

Die hervorgehobene Zeile ist ein Knoten im Live-DOM-Baum. Erweitern Sie den Pfeil, um verschachtelte Elemente anzuzeigen, oder klicken Sie auf das Elementauswahl-Symbol, bewegen Sie den Mauszeiger über die Seite und wählen Sie ein Ziel aus. Die Auswahlhilfe ist besonders nützlich bei kleinen oder überlappenden Elementen.

CSS überprüfen oder testen

Im Bereich „Stile“ (in Firefox „Regeln“ genannt) sehen Sie, welche CSS-Deklarationen gelten und woher sie stammen. Deaktivieren Sie eine Deklaration oder bearbeiten Sie einen Wert, um Änderungen an Layout, Farben, Abständen oder Typografie in einer Vorschau anzuzeigen. Die Dateien der Website werden dadurch nicht überschrieben und die Darstellung für andere Besucher bleibt unverändert.

Überprüfen Sie ein responsives Layout

Jeder Browser verfügt über eine responsive Vorschau oder eine Gerätevorschau. Wählen oder geben Sie eine kleinere Viewport-Größe ein und überprüfen Sie anschließend dasselbe DOM und die Stile. Dies kann Probleme mit Haltepunkten und Layout aufdecken, ersetzt aber nicht das Testen auf echten Geräten.

Tastenkombinationen im Überblick

Tastenkombinationen können je nach Betriebssystem, Browserversion oder benutzerdefinierten Einstellungen variieren. Falls eine Tastenkombination nicht funktioniert, verwenden Sie das Menü oder den Kontextmenübefehl Ihres Browsers.

Werden Änderungen in „Element untersuchen“ gespeichert?

Normale Änderungen in den Bereichen „Elemente“, „Inspektor“ oder „Stile“ sind nur temporär und werden im Browser gespeichert. Durch Neuladen der Seite wird in der Regel die vom Webserver bereitgestellte Version wiederhergestellt. Einige Entwickler-Workflows speichern lokale Änderungen auf dem eigenen Computer, diese werden jedoch nicht auf dem Webserver veröffentlicht. Nutzen Sie die Entwicklertools daher zum Untersuchen und Testen von Seiten, nicht um Änderungen an einer Live-Website für alle Benutzer vorzunehmen.

Für aktuelle Details konsultieren Sie bitte den offiziellen Chrome DevTools-Leitfaden , die Firefox-Shortcuts , Apples Safari-Einrichtungs- und Inspektionsleitfaden sowie die Microsoft Edge-Übersicht .