Analysieren von Seiten mit dem Tool "Überprüfen"

  • Artikel
  • 3 Minuten Lesedauer

Verwenden Sie das Inspect-Tool , um Informationen zu einem Element auf einer gerenderten Webseite anzuzeigen.

  • Wenn das Inspect-Tool aktiv ist, zeigen Sie mit dem Mauszeiger auf Elemente auf der Webseite, und DevTools fügt eine Informationsüberlagerungsinformationen und Rasterhervorhebung auf der Webseite hinzu.

  • Wenn Sie auf ein Element auf der Webseite klicken, wird die DOM-Struktur im Elementtool automatisch aktualisiert, um das DOM-Element anzuzeigen, das dem angeklickten Element auf der gerenderten Webseite entspricht, und dessen CSS-Formatierung auf der Registerkarte " Formatvorlagen ".

Aktivieren des Inspect-Tools

So testen Sie das Inspect-Tool :

  1. Öffnen Sie die Seite "Demo prüfen " in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Demowebseite, und wählen Sie dann "Überprüfen" aus, um DevTools zu öffnen.

  3. Klicken Sie in der oberen linken Ecke von DevTools auf die Schaltfläche "Tool prüfen" (Symbol "Tool prüfen"). Wenn DevTools den Fokus hat, drücken Ctrl++Shift``C Sie (Windows, Linux) oderC Command+Shift+(macOS).

    Die Schaltfläche "Tool prüfen" oben links in DevTools.

    Das Schaltflächensymbol wird blau (Das Inspect-Symbol) und gibt an, dass das Inspect-Tool aktiv ist.

  4. Zeigen Sie auf der gerenderten Webseite auf Elemente, und beobachten Sie die Informationsüberlagerung und die Rasterhervorhebung.

  5. Klicken Sie auf ein Element auf der gerenderten Webseite.

    Die DOM-Struktur im Elementtool wird automatisch aktualisiert, um das DOM-Element anzuzeigen, das dem angeklickten Element auf der gerenderten Webseite und dessen CSS-Formatierung auf der Registerkarte " Formatvorlagen " entspricht. Wenn Sie auf die Webseite klicken, wird auch der Überprüfungsmodus auf der Webseite deaktiviert.

Abrufen von Elementinformationen aus der Inspect-Überlagerung

Wenn das Inspect-Tool aktiv ist, wird beim Zeigen auf ein beliebiges Element auf der gerenderten Webseite die Inspect-Überlagerung angezeigt. Die Inspect-Überlagerung zeigt allgemeine und Barrierefreiheitsinformationen zu diesem Element an.

Die Überlagerung des Tools "Überprüfen" auf einer gerenderten Seite mit Informationen zu einem Überschriftenelement "h1".

Wenn Sie mit dem Mauszeiger auf ein Seitenelement auf der gerenderten Seite zeigen, wird die DOM-Struktur automatisch erweitert, um das Element hervorzuheben, auf das Sie zeigen.

Die Inspect-Überlagerung zeigt die folgenden Informationen zum Element:

  • Der Name des Elements.
  • Die Abmessungen des Elements in Pixeln.
  • Die Farbe des Elements als Hexadezimalwert und Farbmuster.
  • Die Schriftarteinstellungen des Elements.
  • Rand und Abstand des Elements in Pixeln.

Welche Informationen angezeigt werden, hängt vom Typ des Elements und den darauf angewendeten Formatvorlagen ab. Wenn das Element mithilfe des CSS-Rasters oder css-Flexbox positioniert wird, wird neben dem Namen des Elements in der Inspect-Überlagerung ein anderes Symbol angezeigt:

Ein Element, das CSS flexbox verwendet, verfügt über ein zusätzliches Symbol neben seinem Namen in der Inspect-Überlagerung.

Im Abschnitt "Barrierefreiheit " des Overlays "Überprüfen " werden Informationen zu folgenden Zwecken angezeigt:

  • Textfarbkontrast.
  • Der Name und die Rolle des Elements, das der Hilfstechnologie gemeldet wird.
  • Gibt an, ob das Element fokussierbar ist.

Auf der Seite "Demo prüfen " für die Bad Contrast Schaltfläche verfügt die Überlagerung "Überprüfen " beispielsweise über ein Warnsymbol neben dem Kontrastwert 1,77. Die Inspect-Überlagerung zeigt außerdem, dass die Schaltfläche nicht über die Tastatur fokussierbar ist. Die Schaltfläche kann nicht über die Tastatur navigiert werden, da die Schaltfläche als <div> Element mit einer Klasse von buttonimplementiert wird, anstatt als <button> Element implementiert zu werden.

Elemente ohne ausreichenden Kontrast verfügen über ein Warnsymbol.

Untersuchen nicht zugänglicher Elemente

Elemente mit der CSS-Eigenschaft pointer-events: none sind für das Inspect-Tool nicht verfügbar. Zeigen Sie auf der Seite "Demo prüfen " auf die Overlay Button Seite, und Sie werden sehen, dass das übergeordnete Element (div.wrapper) anstelle des Overlay Buttonangezeigt wird.

Ein Element mit der CSS-Eigenschaft "Zeigerereignisse: keine" kann nicht ausgewählt werden.

Um Elemente zu untersuchen, die die CSS-Eigenschaft pointer-events: noneaufweisen, drücken Sie Shift , während Sie mit der Maus auf das Element zeigen. Es gibt auch eine Farbüberlagerung in Seitenlayoutbereichen, die angibt, dass Sie sich in einem erweiterten Auswahlmodus befinden.

Wenn Sie beim Auswählen von Elementen auf der Seite die UMSCHALTTASTE drücken, können Sie Elemente auswählen, die eine CSS-Formateigenschaft "pointer-events: none" aufweisen.

Auswählen des Elements und Beenden des Inspect-Modus

Wenn Sie auf ein Element auf der gerenderten Seite klicken:

  • Das Inspect-Tool ist deaktiviert.
  • Der entsprechende DOM-Knoten ist hervorgehoben.
  • Das Formatvorlagentool zeigt das CSS an, das auf das Element angewendet wird.

Wenn Sie auf ein Element auf der gerenderten Seite klicken, zeigt das Formatvorlagentool die Formatvorlagen an, die auf das Element angewendet werden.

Beibehalten der QuickInfo und der Rasterfarbüberlagerung des Inspect-Tools

Wenn Sie das Inspect-Tool verwenden und sich auf der gerenderten Webseite bewegen, können Sie die aktuelle Inspect-Überlagerung anzeigen lassen. Halten Ctrl+Alt Sie (Windows, Linux) oder Ctrl+Option (macOS) gedrückt, während Sie sich auf der gerenderten Webseite bewegen. Die vorhandene QuickInfo- und Rasterfarbüberlagerung für das Inspect-Tool bleibt angezeigt, während Sie mit dem Mauszeiger auf verschiedene Teile der gerenderten Webseite zeigen.

Vorübergehendes Ausblenden der Inspect-Element-QuickInfo

Wenn Sie die Überlagerung des Inspect-Tools ausblenden möchten, während Sie den Mauszeiger über die gerenderte Webseite bewegen, halten CtrlSie gedrückt.

Weitere Informationen