Abzeichen-Referenz

Sofia Emelianova
Sofia Emelianova
GitHub

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. Klicken Sie mit der rechten Maustaste auf ein Element im DOM-Baum und setzen Sie im Untermenü Badge-Einstellungen ein Häkchen bei einem oder mehreren Badges.

Das Menü „Badge-Einstellungen“

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 der Seite im Bereich Quellen aufzurufen.

Das Badge „Quelle ansehen“

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-Eigenschaft auf grid oder inline-grid gesetzt ist. Solche Elemente haben 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.

Raster-Overlay.

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 Eigenschaften grid-template-columns und grid-template-rows auf subgrid gesetzt sind. Solche Elemente haben 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.

Unterraster-Overlay.

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

Flex

Ein HTML-Element ist ein Flex-Container, wenn die CSS-Eigenschaft display auf flex oder inline-flex gesetzt ist. Solche Elemente haben 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.

Flex-Overlay.

Das Overlay zeigt die Positionen der untergeordneten Elemente.

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

Die Entwicklertools können einige Anzeigen-Frames erkennen und taggen. Solche Frames haben 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.

Anzeigenlogo

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

Kurzinfo für das Anzeigenlogo.

  • Skriptherkunft: 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-Eigenschaft auf scroll oder auto gesetzt ist und genügend Inhalt vorhanden ist, um einen Überlauf zu verursachen. Solche Elemente haben scroll-Badges.

Scroll-Badge für einen DOM-Baumknoten.

Scroll-Snap

Scroll-Container können CSS-Eigenschaften haben, mit denen Snap-Punkte konfiguriert werden. Solche Elemente haben 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.

Scroll-Snap-Overlay.

Das Overlay zeigt die Elementpositionen und Snap-Punkte.

Container

Ein HTML-Element ist ein Container, wenn es die container-type CSS-Eigenschaft hat. Solche Elemente haben 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.

Container-Overlay.

Das Overlay zeigt die Positionen der untergeordneten Elemente.

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

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. Elemente mit Slot-Inhalten haben slot Badges, die als Links zu den entsprechenden Slots dienen.

Badge slot in der folgenden Vorschau suchen:

  1. Untersuchen Sie das Element in der Vorschau.
  2. Klicken Sie im DOM-Baum neben dem Element auf das Badge slot, um den entsprechenden Slot zu finden. Abzeichen einsetzen und enthüllen
  3. Klicken Sie auf das reveal Badge, um zum Inhalt des Slots zurückzukehren.

Oberste Ebene

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

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

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

Badge top-layer (N) in der folgenden Vorschau suchen:

  1. Klicken Sie in der Vorschau auf Open dialog.
  2. Untersuchen Sie das Dialogfeld.
  3. Klicken Sie im DOM-Baum neben dem Element <dialog> auf das Badge top-layer (1). Im Bereich Elemente werden Sie zum entsprechenden Element im #top-layer-Container nach dem schließenden </html>-Tag weitergeleitet. Der Container und das Logo der obersten Ebene.
  4. Klicken Sie neben dem Element oder seinem ::backdrop auf das Badge reveal, um zum Element <dialog> 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.

Das Media-Logo ist in den Logo-Einstellungen aktiviert und wird neben dem Videoelement angezeigt.

Weitere Informationen finden Sie unter Media-Player mit dem Bereich „Medien“ debuggen.

Pop-over

Ein Pop-over ist ein Element mit einem popover-Attribut und eignet sich für eine Vielzahl interaktiver Muster, darunter Tooltips, Warnungen und Toasts. Solche Elemente haben 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.

    Das Pop-over-Badge neben dem Element mit einem Pop-over-Attribut.

  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. Solche Elemente haben starting-style-Badges.

Mit diesem Badge werden die Stile in der Regel @starting-style ein- und ausgeblendet, damit 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.

    Das Badge für den Startstil neben dem Element mit der @starting-style-Regel.

  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.