Abzeichen-Referenz

Mit dieser umfassenden Referenz zu Badges im Bereich Elemente können Sie verschiedene Overlays ein- und ausblenden und die Navigation im DOM-Baum beschleunigen.

Badges ein- oder ausblenden

So blenden Sie bestimmte Badges ein oder aus:

1. Öffnen Sie die Entwicklertools.
2. Rechtsklicken Sie auf ein Element im DOM-Baum und wählen Sie im Untermenü Badge-Einstellungen ein oder mehrere Badges aus.

Im Bereich Elemente werden die ausgewählten Badges neben den entsprechenden Elementen im DOM-Baum angezeigt. In den nächsten Abschnitten wird jedes Badge erläutert.

Quellcode ansehen

Das view-source Badge befindet sich neben dem <html> Tag im Stammverzeichnis der HTML-Seite. Klicken Sie darauf, um den Quellcode Ihrer Seite im Bereich Quellen aufzurufen.

Dieses Badge bietet eine alternative Möglichkeit zur Option Quellcode der Seite ansehen im Kontextmenü der Chrome-Seite (Rechtsklick):

1. Klicken Sie in Chrome mit der rechten Maustaste auf eine Seite und wählen Sie Untersuchen aus.
2. Klicken Sie im Bereich Elemente neben dem Tag <html> auf das Badge view-source.
3. Sehen Sie sich den Quellcode der Seite im Bereich Quellen an.

Raster

Ein HTML-Element ist ein Raster-Container, wenn die display CSS-Property auf grid oder inline-grid festgelegt ist. Neben solchen Elementen befinden sich grid-Badges, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Overlay in der folgenden Vorschau ein-/ausblenden:

1. Untersuchen Sie das Element in der Vorschau.
2. Klicken Sie im DOM-Baum neben dem Element auf das Badge grid und sehen Sie sich das Overlay an.

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

Informationen zum Debuggen des Rasterlayouts finden Sie unter CSS-Raster untersuchen.

Unterraster

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

Overlay in der folgenden Vorschau ein-/ausblenden:

1. Untersuchen Sie das Element in der Vorschau.
2. Klicken Sie im DOM-Baum neben dem Element auf das Badge subgrid und sehen Sie sich das Overlay an.

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

Flex

Ein HTML-Element ist ein Flex-Container, wenn die display CSS-Property auf flex oder inline-flex festgelegt ist. Neben solchen Elementen befinden sich flex-Badges, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Overlay in der folgenden Vorschau ein-/ausblenden:

1. Untersuchen Sie das Element in der Vorschau.
2. Klicken Sie im DOM-Baum neben dem Element auf das Badge flex und sehen Sie sich das Overlay an.

Das Overlay zeigt die Positionen der untergeordneten Elemente.

Informationen zum Debuggen von Flex-Layouts finden Sie unter CSS-Flexbox untersuchen und debuggen.

Anzeige

Die Entwicklertools können einige Anzeigen-Frames erkennen und taggen. Neben solchen Frames befinden sich ad-Badges.

Anzeige in der folgenden Vorschau suchen:

1. Untersuchen Sie das Element in der Vorschau.
2. Suchen Sie im DOM-Baum nach einem Element mit dem Badge ad.

Das Badge ad ist nicht anklickbar. Wenn Sie den Mauszeiger darauf bewegen, wird jedoch ein Tooltip mit Kontextinformationen angezeigt, warum das Element als Anzeige identifiziert wurde, z. B.:

• Skriptabstammung: Welche Skripts waren an der Erstellung des Elements beteiligt?
• Regeln der Filterliste: Die spezifische Regel aus einer Filterliste (z. B. EasyList), die mit dem Element oder der geladenen Ressource übereinstimmt.

Sie können auch auf dem Tab Rendering Anzeigen-Frames rot hervorheben.

Scrollen

Ein HTML-Element ist ein Scroll-Container, wenn die overflow CSS-Property auf scroll oder auto festgelegt ist und genügend Inhalt vorhanden ist, um einen Überlauf zu verursachen. Neben solchen Elementen befinden sich scroll-Badges.

Scroll-Snap

Scroll-Container können CSS-Properties haben, mit denen Snap-Punkte konfiguriert werden. Neben solchen Elementen befinden sich scroll-snap-Badges, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Overlay in der folgenden Vorschau ein-/ausblenden:

1. Untersuchen Sie das Element in der Vorschau.
2. Klicken Sie im DOM-Baum neben dem Element auf das Badge scroll-snap.
3. Scrollen Sie das Element nach rechts und sehen Sie sich das Overlay an.

Das Overlay zeigt Elementpositionen und Snap-Punkte.

Container

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

Overlay in der folgenden Vorschau ein-/ausblenden:

1. Untersuchen Sie das Element in der Vorschau.
2. Klicken Sie im DOM-Baum neben dem Element auf das Badge container.
3. Ändern Sie die Größe des Elements, indem Sie die rechte untere Ecke ziehen, und sehen Sie sich die Layoutänderung und das Overlay an.

Das Overlay zeigt die Positionen der untergeordneten Elemente.

Informationen zum Debuggen von Containerabfragen finden Sie unter CSS-Containerabfragen untersuchen und debuggen.

Slot

Das <slot> HTML-Element ist ein Platzhalter, den Sie mit eigenen Inhalten füllen können. Zusammen mit dem Element <template> können Sie mit <slot> separate DOM-Bäume erstellen und zusammen präsentieren. Neben den Elementen des Slot-Inhalts befinden sich ink_selectionslot Badges, die als Links zu den entsprechenden Slots dienen.

Suchen Sie das ink_selectionslot-Badge in der folgenden Vorschau:

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

Oberste Ebene

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

Damit Sie Elemente der obersten Ebene visualisieren können, fügen die Elemente nach dem schließenden </html>-Tag einen #top-layer-Container zum DOM-Baum hinzu.

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

Suchen Sie das ink_selectiontop-layer (N)-Badge in der folgenden Vorschau:

1. Klicken Sie in der Vorschau auf Dialog öffnen.
2. Untersuchen Sie den Dialog.
3. Klicken Sie im DOM-Baum neben dem Element <dialog> auf das Badge ink_selectiontop-layer (1). Im Bereich Elemente werden Sie zum entsprechenden Element im #top-layer-Container nach dem schließenden </html>-Tag weitergeleitet.
4. Klicken Sie auf das ink_selectionreveal Badge neben dem Element oder seinem ::backdrop, um zum <dialog> Element zurückzukehren.

Medien

Das Badge media ist standardmäßig deaktiviert. Wenn es aktiviert ist, wird es neben den Elementen <audio> und <video> angezeigt. Klicken Sie auf dieses Badge, um den Bereich Medien zu öffnen und Ihre Medien zu debuggen.

Weitere Informationen finden Sie unter Mediaplayer mit dem Bereich „Medien“ debuggen.

Pop-over

Ein Pop-over ist ein Element mit dem Attribut popover. Es ist für eine Vielzahl interaktiver Muster nützlich, darunter Tooltips, Benachrichtigungen und Toasts. Neben solchen Elementen befinden sich popover-Badges.

Mit diesem Badge wird ein top-layer-Badge daneben ein- und ausgeblendet, das zu den entsprechenden Elementen im #top-layer-Container verlinkt.

Badge popover in der folgenden Vorschau suchen:

1. Klicken Sie in der Vorschau auf TOGGLE POPOVER.
2. Untersuchen Sie das angezeigte Pop-over.

3. Klicken Sie im DOM-Baum neben dem Element <div popover> auf das Badge popover. Im Bereich Elemente wird das Badge top-layer angezeigt.

   

4. Folgen Sie der Anleitung im Abschnitt Oberste Ebene.

Weitere Informationen finden Sie unter https://web.dev/learn/css/popover-and-dialog.

Ausgangsstil

Mit der@starting-style Regel werden die anfänglichen Stile für ein Element definiert, bevor es auf der Seite gerendert wird. Dies ist für Elemente erforderlich, die animiert werden von display: none, da sie einen Zustand benötigen, von dem aus die Animation erfolgen kann. Neben solchen Elementen befinden sich starting-style-Badges.

Mit diesem Badge werden die Stile in der Regel @starting-style ein- und ausgeblendet, sodass Sie die Animation in Aktion sehen können.

Badge starting-style in der folgenden Vorschau suchen:

1. Klicken Sie in der Vorschau auf OPEN POPOVER.
2. Untersuchen Sie das angezeigte Pop-over.

3. Klicken Sie im DOM-Baum neben dem Element <div popover> auf das Badge starting-style.

   

4. Sehen Sie sich die Animation in Aktion und die angewendeten Stile auf dem Tab Elemente > Stile an.

Weitere Informationen finden Sie unter Pop-over animieren.

Benutzerdefiniertes Element

Benutzerdefinierte HTML-Elemente, die durch Tag-Namen mit Bindestrichen oder is="..." Attribute für angepasste integrierte Elemente identifiziert werden, befinden sich im DOM-Baum custom-element Badges.

Klicken Sie auf das Badge, um zum entsprechenden Code im Bereich Quellen zu gelangen.