Prüfmodus: Elementeigenschaften schnell analysieren

Dale St. Marthe
Dale St. Marthe
LinkedIn

Mit dem Inspect-Modus können Sie bestimmte Elemente auf Ihrer Webseite fokussieren und analysieren.

Übersicht

Wenn Sie den Inspect-Modus (Auswahltool) in den Entwicklertools aktivieren, können Sie den Mauszeiger auf Elemente auf Ihrer Seite bewegen und sich Informationen zu Stil und Barrierefreiheit ansehen. Wenn Sie auf ein Element klicken, während der Inspect-Modus aktiv ist, wird das entsprechende DOM-Element im DOM-Baum des Bereichs Elemente hervorgehoben und die relevanten Stile werden auf dem Tab Stile aufgelistet.

Prüfmodus aktivieren

So aktivieren Sie den Inspect-Modus:

  1. DevTools öffnen
  2. Klicken Sie in der Aktionsleiste auf die Schaltfläche Inspect-Modus.

Die Schaltfläche „Inspect Mode“ (Prüfen-Modus) in der Aktionsleiste.

Die Auswahl ist aktiv, wenn das Symbol für den Inspect-Modus blau ist.

Sie können auch eine Tastenkombination in Chrome verwenden, um den Bereich Elemente im Inspect-Modus zu öffnen. Drücken Sie eine der folgenden Tasten:

  • macOS: Befehlstaste + Wahltaste + C
  • Windows, Linux, ChromeOS: Strg + Umschalttaste + C

Im Inspektionsmodus Informationen zu Stil und Barrierefreiheit aufrufen

Wenn der Inspect-Modus aktiv ist, bewegen Sie den Mauszeiger auf Elemente auf der Seite. Dadurch werden die Elemente hervorgehoben und ein Tooltip wird eingeblendet. Im Bereich Elemente wird die DOM-Baumstruktur automatisch maximiert, um das Element hervorzuheben, auf das Sie den Mauszeiger bewegen.

Ein Element auf der Devtools-Startseite, das hervorgehoben ist und ein Tooltip-Overlay hat.

Je nach Element werden in der Kurzinfo zum Inspect-Modus die folgenden Stileigenschaften angezeigt:

  • Die Selektoren des Elements.
  • Die Abmessungen des Elements in Pixeln.
  • Die Hintergrundfarbe des Elements.
  • Die Textfarbe des Elements.
  • Die Schrifteigenschaften des Elements.
  • Der Abstand des Elements in Pixeln.
  • Der Rand des Elements in Pixeln.

Bei Elementen, für die CSS-Raster oder CSS-Flexbox verwendet wird, wird neben dem Namen des Elements ein anderes Symbol angezeigt.

Ein Tooltip-Overlay mit einem Flex-Symbol oben links

Im Bereich „Barrierefreiheit“ der Kurzinfo werden die folgenden Informationen angezeigt:

  • Der Name und die Rolle des Elements, das an Hilfstechnologien gemeldet wurde.
  • Gibt an, ob der Tastaturfokus auf das Element gesetzt werden kann.

Wenn Sie den Mauszeiger auf Textüberschriften bewegen, wird ein Kontrastverhältnis angezeigt, das den Helligkeitsunterschied zwischen den Farben im Vordergrund (Textfarbe) und im Hintergrund misst.

In einer Kurzinfo wird ein Kontrastverhältnis von 1,7 für eine Überschrift angezeigt.

Ein gutes Kontrastverhältnis ist für gut lesbaren Text unerlässlich. Weitere Informationen zum Beheben von Text mit geringem Kontrast

Kurzinfo zum Inspektionsmodus beibehalten und ausblenden

Wenn Sie die Kurzinfo zum Inspect-Modus beibehalten möchten, während Sie den Mauszeiger an eine andere Stelle bewegen, halten Sie Folgendes gedrückt:

  • macOS: Strg + Wahltaste
  • Windows, Linux, ChromeOS: Strg + Alt

Wenn Sie die Kurzinfo zum Prüfen vorübergehend ausblenden möchten, während Sie den Mauszeiger bewegen, halten Sie die Strg-Taste gedrückt.

Nicht barrierefreie Elemente prüfen

Elemente mit der CSS-Property pointer-events: none; können im Inspect-Modus anfangs nicht ausgewählt werden.

Ein inaktives Element, das nicht durch die Auswahl hervorgehoben wird.

Wenn Sie nicht zugängliche Elemente prüfen möchten, halten Sie die Umschalttaste gedrückt und bewegen Sie den Mauszeiger auf das Element.

Ein inaktives Element, das durch die Auswahl des Selektors hervorgehoben wird.