Abzeichen-Referenz

Sofia Emelianova

Mit dieser umfassenden Referenz für Badges im Bereich Elemente können Sie verschiedene Overlays aktivieren und die DOM-Baumnavigation beschleunigen.

Badges ein- oder ausblenden

So blenden Sie Abzeichen ein oder aus:

1. Öffnen Sie die Entwicklertools.
2. Klicken Sie mit der rechten Maustaste auf ein Element in der DOM-Struktur und wählen Sie Logo-Einstellungen... aus.
3. Aktiviere oder deaktiviere die Kontrollkästchen neben den ausgewählten Badges.

Im Steuerfeld Elemente werden die ausgewählten Logos neben den entsprechenden Elementen in der DOM-Baumstruktur angezeigt. In den nächsten Abschnitten werden die einzelnen Logos erläutert.

GRid

Ein HTML-Element ist ein Rastercontainer, wenn seine CSS-Eigenschaft display auf grid oder inline-grid gesetzt ist. Neben solchen Elementen sind grid Badges zu sehen, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Overlay in der folgenden Vorschau aktivieren/deaktivieren:

1. Prüfen Sie das Element in der Vorschau.
2. Klicken Sie in der DOM-Baumstruktur auf das grid-Logo neben dem Element und beobachten Sie das Overlay.

Das Overlay zeigt Spalten, Zeilen, deren Zahlen und Lücken an.

Informationen zum Debuggen des Rasterlayouts finden Sie unter CSS-Raster prüfen.

Unternetz

Ein Unterraster ist ein verschachteltes Raster, das dieselben Spuren wie sein übergeordnetes Raster verwendet. Ein Element ist ein untergeordneter Container, wenn eine oder beide seiner grid-template-columns- und grid-template-rows-Eigenschaften auf subgrid festgelegt sind. Neben solchen Elementen sind subgrid Badges zu sehen, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Overlay in der folgenden Vorschau aktivieren/deaktivieren:

1. Prüfen Sie das Element in der Vorschau.
2. Klicken Sie in der DOM-Baumstruktur auf das subgrid-Logo neben dem Element und beobachten Sie das Overlay.

Das Overlay zeigt Spalten, Zeilen, deren Zahlen und Lücken in einem Unterraster.

Flex

Ein HTML-Element ist ein flexibler Container, wenn seine CSS-Eigenschaft display auf flex oder inline-flex festgelegt ist. Neben solchen Elementen sind flex Badges zu sehen, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Overlay in der folgenden Vorschau aktivieren/deaktivieren:

1. Prüfen Sie das Element in der Vorschau.
2. Klicken Sie in der DOM-Baumstruktur auf das flex-Logo neben dem Element und beobachten Sie das Overlay.

Das Overlay zeigt die Positionen der untergeordneten Elemente.

Informationen zum Debuggen von Flex-Layouts finden Sie unter CSS-Flexbox überprüfen und debuggen.

Ad

Die Entwicklertools können einige Anzeigen-Frames erkennen und mit Tags versehen. Neben solchen Frames werden ad Badges angezeigt.

In der folgenden Vorschau sehen Sie eine Anzeige:

1. Prüfen Sie das Element in der Vorschau.
2. Suchen Sie in der DOM-Struktur nach einem Element mit dem Logo ad daneben.

Das Logo ad ist nicht anklickbar. Sie können aber auf dem Tab Rendering Anzeigenframes rot hervorheben.

Scroll-Snap

Ein HTML-Element ist ein Scroll-Container, wenn seine CSS-Eigenschaft overflow auf scroll gesetzt ist, oder auto, wenn genügend Inhalt vorhanden ist, der einen Überlauf verursacht. Scroll-Container können CSS-Eigenschaften zum Konfigurieren von Snap-Punkten haben. Neben solchen Elementen sind scroll-snap Badges zu sehen, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Overlay in der folgenden Vorschau aktivieren/deaktivieren:

1. Prüfen Sie das Element in der Vorschau.
2. Klicken Sie in der DOM-Baumstruktur auf das scroll-snap-Logo neben dem Element.
3. Versuchen Sie, das Element nach rechts zu scrollen, und beobachten Sie das Overlay.

Im Overlay werden die Positionen und Ausrichtungspunkte der Elemente angezeigt.

Container

Ein HTML-Element ist ein Container, wenn es die CSS-Eigenschaft container-type enthält. Neben solchen Elementen sind container Badges zu sehen, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Hinweis: CSS-Containerabfragen sind eine experimentelle Funktion. Um die Unterstützung in den Entwicklertools zu aktivieren, setze unter chrome://flags den Enable CSS Container Queries-Test auf Enabled. Andernfalls funktioniert die nächste Vorschau nicht.

Overlay in der folgenden Vorschau aktivieren/deaktivieren:

1. Prüfen Sie das Element in der Vorschau.
2. Klicken Sie in der DOM-Baumstruktur auf das container-Logo neben dem Element.
3. Ändern Sie die Größe des Elements, indem Sie seine rechte untere Ecke ziehen und beobachten Sie die Layoutänderung und das Overlay.

Das Overlay zeigt die Positionen der untergeordneten Elemente.

Informationen zum Debuggen von Containerabfragen finden Sie unter CSS-Containerabfragen prüfen und debuggen.

Slot

Das HTML-Element <slot> ist ein Platzhalter, den Sie mit eigenen Inhalten füllen können. Zusammen mit dem Element <template> können Sie mit <slot> separate DOM-Baumstrukturen erstellen und gemeinsam präsentieren. Neben den Inhaltselementen der Anzeigenfläche sind slot Logos zu sehen, die als Links zu den entsprechenden Anzeigenflächen dienen.

Das Logo slot finden Sie in der folgenden Vorschau:

1. Prüfen Sie das Element in der Vorschau.
2. Klicken Sie in der DOM-Baumstruktur auf das slot-Logo neben dem Element, um den entsprechenden Slot zu finden.
   Wichtiger Hinweis:Das slot-Logo ist mit einem reveal-Symbol versehen, über das Sie zurückkehren können.
3. Klicken Sie auf das reveal-Symbol, um zum Inhalt des Slots zurückzukehren.

Oberste Ebene

Dieses Logo hilft Ihnen, das Konzept der oberen Ebene zu verstehen und zu visualisieren. Auf der obersten Ebene werden Inhalte über allen anderen Ebenen gerendert, unabhängig von z-index. Wenn Sie ein <dialog>-Element mit der .showModal()-Methode öffnen, wird es vom Browser im obersten Layer abgelegt.

Zur Visualisierung der obersten Ebenenelemente wird im Steuerfeld Elemente nach dem schließenden </html>-Tag ein #top-layer-Container zum DOM-Baum hinzugefügt.

Neben den Elementen der obersten Ebene werden top-layer (N) Logos angezeigt, wobei N die Indexnummer des Elements ist. Die Logos sind Links zu den entsprechenden Elementen im Container #top-layer.

Das Logo top-layer (N) finden Sie in der folgenden Vorschau:

1. Klicken Sie in der Vorschau auf Dialogfeld öffnen.
2. Prüfen Sie das Dialogfeld.
3. Klicken Sie in der DOM-Baumstruktur auf das top-layer (1)-Logo neben dem <dialog>-Element. Über den Bereich Elemente gelangen Sie zum entsprechenden Element im #top-layer-Container nach dem schließenden </html>-Tag.
   Wichtiger Hinweis:Das top-layer (N)-Logo ist mit einem reveal-Symbol versehen, über das Sie zurückkehren können.
4. Kehren Sie zum <dialog>-Element zurück, indem Sie auf das reveal-Logo neben dem Element oder seinem ::backdrop klicken.

Medien

Das Logo „media“ ist standardmäßig deaktiviert. Wenn es aktiviert ist, wird es neben den Elementen <audio> und <video> angezeigt. Klicken Sie auf dieses Symbol, um den Bereich Medien zu öffnen und Fehler in den Medien zu beheben.

Weitere Informationen finden Sie im Hilfeartikel Fehler in Mediaplayern mit dem Steuerfeld „Medien“ beheben.