Analysieren von Seiten mit dem Inspect-Tool

  • Artikel

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

  • Wenn das Inspect-Tool aktiv ist, zeigen Sie auf Elemente auf der Webseite, und DevTools fügt eine Informationsüberlagerung und eine Rastermarkierung auf der Webseite hinzu.

  • Wenn Sie auf der Webseite auf ein Element klicken, wird die DOM-Struktur im Tool Elemente automatisch aktualisiert, sodass das DOM-Element angezeigt wird, das dem element entspricht, auf das auf der gerenderten Webseite geklickt wurde, und dessen CSS-Formatvorlagen auf der Registerkarte Formatvorlagen .

Aktivieren des Inspect-Tools

So testen Sie das Inspect-Tool :

  1. Öffnen Sie die Seite Demo untersuchen in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Demo-Webseite, und wählen Sie dann Untersuchen aus, um DevTools zu öffnen.

  3. Klicken Sie in der oberen linken Ecke von DevTools auf die Schaltfläche Tool überprüfen (Toolsymbol überprüfen). Wenn DevTools den Fokus hat, drücken Sie STRG+UMSCHALT+C (Windows, Linux) oder BEFEHL+UMSCHALT+C (macOS).

    Schaltfläche

    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 watch die Informationsüberlagerung und die Rastermarkierung.

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

    Die DOM-Struktur im Tool Elemente wird automatisch aktualisiert, um das DOM-Element anzuzeigen, das dem element entspricht, auf das auf der gerenderten Webseite geklickt wurde, und dessen CSS-Format auf der Registerkarte Formatvorlagen . Durch Klicken auf die Webseite wird auch der Überprüfungsmodus auf der Webseite deaktiviert.

Abrufen von Elementinformationen aus der Inspect-Überlagerung

Wenn das Inspect-Tool aktiv ist, wird beim Bewegen des Mauszeigers 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 Inspect-Tools auf einer gerenderten Seite mit Informationen zu einem h1-Überschriftenelement

Wenn Sie 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 an:

  • Der Name des Elements.
  • Die Abmessungen des Elements in Pixeln.
  • Die Farbe des Elements als Hexadezimalwert und Farbmuster.
  • Die Schriftarteinstellungen des Elements.
  • Der Rand und die Auffüllung des Elements in Pixeln.

Welche Informationen angezeigt werden, hängt vom Typ des Elements und den darauf angewendeten Stilen ab. Wenn das Element mithilfe von CSS-Raster oder CSS-Flexbox positioniert wird, wird neben dem Namen des Elements in der Überlagerung überprüfen ein anderes Symbol angezeigt:

Ein Element, das CSS-Flexbox verwendet, verfügt neben seinem Namen in der Überlagerung

Im Abschnitt Barrierefreiheit der Überlagerung überprüfen werden Informationen zu folgenden Informationen angezeigt:

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

Auf der Seite "Demo untersuchen " für die Schaltfläche enthält die Bad ContrastÜberlagerung "Inspect " beispielsweise ein Warnsymbol neben dem Kontrastwert 1,77. Die Überlagerung "Inspect " zeigt auch, dass die Schaltfläche nicht über die Tastatur fokussierbar ist. Zu der 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

Überprüfen nicht zugänglicher Elemente

Elemente mit der CSS-Eigenschaft von pointer-events: none sind für das Inspect-Tool nicht verfügbar. Bewegen Sie auf der Seite Demo untersuchen den Mauszeiger auf , Overlay Button und Sie sehen, dass das übergeordnete Element (div.wrapper) anstelle von Overlay Buttonangezeigt wird.

Ein Element, das über die CSS-Eigenschaft

Um Elemente zu untersuchen, die über die CSS-Eigenschaft von pointer-events: noneverfügen, drücken Sie UMSCHALT , während Sie mit dem Mauszeiger auf das Element zeigen. Es gibt auch eine Farbüberlagerung für Seitenlayoutbereiche, die angibt, dass Sie sich in einem erweiterten Auswahlmodus befinden.

Durch Drücken der UMSCHALTTASTE beim Auswählen von Elementen auf der Seite können Sie Elemente auswählen, die über die CSS-Formateigenschaft

Auswählen des Elements und Beenden des Überprüfungsmodus

Wenn Sie auf der gerenderten Seite auf ein Element klicken, gehen Sie wie folgt vor:

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

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

Beibehalten der QuickInfo und der Rasterfarbüberlagerung des Tools "Überprüfen"

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

Vorübergehendes Ausblenden der QuickInfo für das Inspect-Element

Um die Überlagerung des Untersuchungstools auszublenden, während Sie den Mauszeiger über die gerenderte Webseite bewegen, halten Sie STRG gedrückt.

Siehe auch