Abzeichen-Referenz

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

Logos ein- oder ausblenden

So blendest du Badges 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 Logoeinstellungen... aus.
3. Klicken Sie die Kästchen neben den ausgewählten Logos an oder deaktivieren Sie sie.

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.

Raster

Ein HTML-Element ist ein Rastercontainer, wenn seine CSS-Eigenschaft display auf grid oder inline-grid gesetzt ist. Solche Elemente haben das Symbol grid daneben, mit dem die entsprechenden Overlays aktiviert oder deaktiviert werden.

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 Tracks wie das übergeordnete 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. Solche Elemente haben das Symbol subgrid daneben, mit dem die entsprechenden Overlays aktiviert oder deaktiviert werden.

Aktivieren oder deaktivieren Sie das Overlay in der folgenden Vorschau:

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

Das Overlay zeigt Spalten, Zeilen, ihre Nummern und Lücken eines Unterrasters.

Flex

Ein HTML-Element ist ein Flex-Container, wenn seine CSS-Property 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.

Aktivieren oder deaktivieren Sie das Overlay in der folgenden Vorschau:

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 prüfen und debuggen.

Anzeige

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-Baumstruktur nach einem Element mit dem Logo ad daneben.

Das Symbol ad ist nicht anklickbar. Auf dem Tab Rendering können Sie jedoch 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. Scrollcontainer können CSS-Attribute haben, mit denen Anknüpfungspunkte konfiguriert werden. Solche Elemente haben das Symbol scroll-snap daneben, mit dem die entsprechenden Overlays aktiviert oder deaktiviert werden.

Overlay in der folgenden Vorschau aktivieren/deaktivieren:

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

Das Overlay zeigt die Elementpositionen und Snap-Punkte.

Container

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

Aktivieren oder deaktivieren Sie das Overlay in der folgenden Vorschau:

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 Beheben von Fehlern bei Containerabfragen finden Sie unter CSS-Containerabfragen prüfen und beheben.

Slot

Das HTML-Element <slot> ist ein Platzhalter, den Sie mit eigenen Inhalten füllen können. Zusammen mit dem <template>-Element können Sie mit <slot> separate DOM-Baumstrukturen erstellen und gemeinsam präsentieren. Neben den Elementen für Slot-Inhalte sind ink_selectionslot-Kennzeichen zu sehen, die als Links zu den entsprechenden Slots dienen.

In der folgenden Vorschau sehen Sie das Symbol ink_selectionslot:

1. Prüfen Sie das Element in der Vorschau.
2. Klicken Sie im DOM-Baum neben dem Element auf das Symbol ink_selectionslot, um den entsprechenden Slot zu finden.
3. Klicke auf das Symbol ink_selectionreveal, um zum Inhalt des Slots zurückzukehren.

Oberste Ebene

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

Damit Sie die Elemente der obersten Ebene besser visualisieren können, wird im Bereich Elemente dem DOM-Baum nach dem schließenden </html>-Tag ein #top-layer-Container hinzugefügt.

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

In der folgenden Vorschau sehen Sie das Symbol ink_selectiontop-layer (N):

1. Klicken Sie in der Vorschau auf Dialogfeld öffnen.
2. Prüfen Sie das Dialogfeld.
3. Klicken Sie im DOM-Baum neben dem Element <dialog> auf das Symbol ink_selectiontop-layer (1). Im Bereich Elemente gelangen Sie zum entsprechenden Element im #top-layer-Container nach dem schließenden </html>-Tag.
4. Kehren Sie zum <dialog>-Element zurück, indem Sie auf das Badge ink_selectionreveal neben dem Element oder dem ::backdrop klicken.

Medien

Das media-Symbol ist standardmäßig deaktiviert. Wenn die Funktion aktiviert ist, wird sie neben den Elementen <audio> und <video> angezeigt. Klicken Sie auf dieses Symbol, um den Bereich Medien zu öffnen und Ihre Medien zu beheben.

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