Mit dieser umfassenden Referenz zu Badges im Steuerfeld Elemente können Sie verschiedene Overlays ein- und ausblenden und die DOM-Baumnavigation beschleunigen.
Abzeichen ein- oder ausblenden
So blenden Sie Abzeichen ein oder aus:
- Öffnen Sie die Entwicklertools.
- Klicken Sie mit der rechten Maustaste auf ein Element in der DOM-Struktur und wählen Sie Badge-Einstellungen... aus.
- Aktivieren oder deaktivieren Sie die Kontrollkästchen neben den ausgewählten Logos.
Im Steuerfeld Elemente werden die ausgewählten Badges neben den entsprechenden Elementen im DOM-Baum 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 festgelegt ist. Neben diesen Elementen sind grid-Symbole zu sehen, über die die entsprechenden Overlays ein- und ausgeblendet werden.
Wechseln Sie das Overlay in der folgenden Vorschau ein-/aus:
- Prüfen Sie das Element in der Vorschau.
- Klicken Sie in der DOM-Baumstruktur auf das Badge
gridneben dem Element und beobachten Sie das Overlay.
Das Overlay zeigt Spalten, Zeilen sowie deren Zahlen und Lücken.
Informationen zum Debuggen des Rasterlayouts finden Sie unter CSS-Raster prüfen.
Subgrid
Ein Subgrid ist ein verschachteltes Raster, das dieselben Tracks wie das übergeordnete Raster verwendet. Ein Element ist ein Unterrastercontainer, wenn eine oder beide seiner grid-template-columns- und grid-template-rows-Eigenschaften auf subgrid festgelegt sind. Neben diesen Elementen sind subgrid-Symbole zu sehen, über die die entsprechenden Overlays ein- und ausgeblendet werden.
Wechseln Sie das Overlay in der folgenden Vorschau ein-/aus:
- Prüfen Sie das Element in der Vorschau.
- Klicken Sie in der DOM-Baumstruktur auf das Badge
subgridneben dem Element und beobachten Sie das Overlay.
Das Overlay zeigt Spalten, Zeilen, deren Nummern und Lücken eines Subrasters.
Flex
Ein HTML-Element ist ein Flex-Container, wenn dessen CSS-Eigenschaft display auf flex oder inline-flex festgelegt ist. Neben diesen Elementen sind flex-Symbole zu sehen, über die die entsprechenden Overlays ein- und ausgeblendet werden.
Wechseln Sie das Overlay in der folgenden Vorschau ein-/aus:
- Prüfen Sie das Element in der Vorschau.
- Klicken Sie in der DOM-Baumstruktur auf das Badge
flexneben dem Element und beobachten Sie das Overlay.
Das Overlay zeigt die Positionen der untergeordneten Elemente.
Informationen zum Debuggen von flexiblen Layouts finden Sie unter CSS-Flexbox prüfen und debuggen.
Werbeunterbrechung
Mit den Entwicklertools können bestimmte Anzeigenframes erkannt und mit Tags versehen werden. Neben solchen Rahmen ist das Etikett ad zu sehen.
In der folgenden Vorschau sehen Sie eine Anzeige:
- Prüfen Sie das Element in der Vorschau.
- Suchen Sie in der DOM-Baumstruktur nach einem Element mit dem Badge
ad.
Das ad-Logo ist nicht anklickbar, aber auf dem Tab Rendering können Sie Anzeigenrahmen rot hervorheben.
Scroll-Snap
Ein HTML-Element ist ein Bildlaufcontainer, wenn seine CSS-Eigenschaft overflow auf scroll gesetzt ist oder auto, wenn genügend Inhalte vorhanden sind, um einen Überlauf zu verursachen. Scroll-Container können CSS-Eigenschaften zum Konfigurieren von Andockpunkten haben. Neben diesen Elementen sind scroll-snap-Symbole zu sehen, über die die entsprechenden Overlays ein- und ausgeblendet werden.
Wechseln Sie das Overlay in der folgenden Vorschau ein-/aus:
- Prüfen Sie das Element in der Vorschau.
- Klicken Sie in der DOM-Baumstruktur auf das Badge
scroll-snapneben dem Element. - Scrollen Sie das Element nach rechts und betrachten Sie das Overlay.
Das Overlay zeigt Elementpositionen und Andockpunkte.
Container
Ein HTML-Element ist ein Container, wenn es die CSS-Eigenschaft container-type hat. Neben diesen Elementen sind container-Symbole zu sehen, über die die entsprechenden Overlays ein- und ausgeblendet werden.
Wechseln Sie das Overlay in der folgenden Vorschau ein-/aus:
- Prüfen Sie das Element in der Vorschau.
- Klicken Sie in der DOM-Baumstruktur auf das Badge
containerneben dem Element. - Ändern Sie die Größe des Elements, indem Sie seine untere rechte Ecke ziehen. Beobachten Sie dabei 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. Mit <slot> können Sie zusammen mit dem <template>-Element separate DOM-Baumstrukturen erstellen und gemeinsam präsentieren. Neben den Inhaltselementen für Anzeigenflächen sind 
slot-Symbole zu sehen, die als Links zu den entsprechenden Anzeigenflächen dienen.
In der folgenden Vorschau sehen Sie das Logo 
slot:
- Prüfen Sie das Element in der Vorschau.
- Klicken Sie in der DOM-Baumstruktur auf das
slot-Logo neben dem Element, um den entsprechenden Slot zu finden.
- Klicken Sie auf das Logo
reveal, um zum Inhalt des Slots zurückzukehren.
Oberste Ebene
Anhand dieses Logos können Sie das Konzept der oberen Ebene verstehen und 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 platziert.
Damit Sie die Elemente der obersten Ebene leichter visualisieren können, wird im Steuerfeld Elemente dem DOM-Baum nach dem schließenden </html>-Tag ein #top-layer-Container hinzugefügt.
Neben den Elementen der obersten Ebene sind 
top-layer (N)-Kennzeichen zu sehen, wobei N die Indexnummer des Elements ist. Die Logos sind Links zu den entsprechenden Elementen im #top-layer-Container.
In der folgenden Vorschau sehen Sie das Logo 
top-layer (N):
- Klicken Sie in der Vorschau auf Dialogfeld öffnen.
- Prüfen Sie das Dialogfeld.
- Klicken Sie in der DOM-Baumstruktur auf das Badge
top-layer (1)neben dem Element<dialog>. Im Steuerfeld Elemente gelangen Sie nach dem schließenden</html>-Tag zum entsprechenden Element im#top-layer-Container.
- Kehren Sie zum
<dialog>-Element zurück, indem Sie auf das
reveal-Logo neben dem Element oder der zugehörigen::backdropklicken.
Medien
Das media-Badge ist standardmäßig deaktiviert. Wenn es aktiviert ist, wird es neben den Elementen <audio> und <video> angezeigt. Klicken Sie auf dieses Badge, um das Steuerfeld Medien zu öffnen und Fehler in Ihren Medien zu beheben.
Weitere Informationen finden Sie unter Fehler bei Mediaplayern über das Steuerfeld „Medien“ beheben.