Abzeichen-Referenz

Sofia Emelianova
Sofia Emelianova
GitHub

Mit dieser umfassenden Referenz von 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 in der DOM-Baumstruktur und aktivieren Sie ein oder mehrere Badges im Untermenü Badge-Einstellungen.

Das Menü „Badge-Einstellungen“

Im Bereich Elemente werden die ausgewählten Badges neben den entsprechenden Elementen im DOM-Baum angezeigt. In den folgenden Abschnitten werden die einzelnen Badges erläutert.

Quellcode anzeigen

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

Das Badge „Quelle ansehen“

Dieses Symbol bietet einen alternativen Workflow zur Option Seitenquelle ansehen im Kontextmenü (Rechtsklick) von Chrome:

  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 Symbol view-source.
  3. Sehen Sie sich den Seitenquelltext im Bereich Quellen an.

Raster

Ein HTML-Element ist ein Grid-Container, wenn seine CSS-Eigenschaft display auf grid oder inline-grid festgelegt ist. Solche Elemente haben grid-Badges, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Schalten Sie das Overlay in der folgenden Vorschau ein:

  1. Element in der Vorschau untersuchen
  2. Klicken Sie in der DOM-Baumstruktur neben dem Element auf das grid-Symbol und sehen Sie sich das Overlay an.

Raster-Overlay.

Im Overlay werden Spalten, Zeilen, ihre Nummern und Lücken angezeigt.

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

Unterraster

Ein Unterraster ist ein verschachteltes Raster, das dieselben Tracks wie das übergeordnete Raster verwendet. Ein Element ist ein Subgrid-Container, wenn eine oder beide seiner grid-template-columns- und grid-template-rows-Eigenschaften auf subgrid gesetzt sind. Solche Elemente haben subgrid-Badges, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Schalten Sie das Overlay in der folgenden Vorschau ein:

  1. Element in der Vorschau untersuchen
  2. Klicken Sie in der DOM-Baumstruktur neben dem Element auf das subgrid-Symbol und sehen Sie sich das Overlay an.

Unterraster-Overlay.

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

Flex

Ein HTML-Element ist ein Flex-Container, wenn seine CSS-Eigenschaft display auf flex oder inline-flex festgelegt ist. Solche Elemente haben flex-Badges, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Schalten Sie das Overlay in der folgenden Vorschau ein:

  1. Element in der Vorschau untersuchen
  2. Klicken Sie in der DOM-Baumstruktur neben dem Element auf das flex-Symbol und sehen Sie sich das Overlay an.

Flex-Overlay

Im Overlay werden die Positionen der untergeordneten Elemente angezeigt.

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

DevTools kann einige Anzeigenframes erkennen und taggen. Solche Frames haben das ad-Symbol daneben.

So finden Sie eine Anzeige in der folgenden Vorschau:

ansehen
  1. Element in der Vorschau untersuchen
  2. Suchen Sie im DOM-Baum nach einem Element mit dem ad-Symbol daneben.

Anzeigenlogo

Das ad-Symbol ist nicht anklickbar. Sie können aber auf dem Tab Rendering Anzeigenrahmen rot hervorheben.

Scrollen

Ein HTML-Element ist ein Scrollcontainer, wenn seine CSS-Eigenschaft overflow auf scroll oder auto festgelegt ist und genügend Inhalt vorhanden ist, um einen Überlauf zu verursachen. Solche Elemente sind mit scroll-Badges gekennzeichnet.

Scrollbadge für einen DOM-Baumknoten.

Scroll-Snap

Scroll-Container können CSS-Properties haben, mit denen Snap-Punkte konfiguriert werden. Solche Elemente haben scroll-snap-Badges, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Schalten Sie das Overlay in der folgenden Vorschau ein:

  1. Element in der Vorschau untersuchen
  2. Klicken Sie in der DOM-Baumstruktur neben dem Element auf das scroll-snap-Symbol.
  3. Scrollen Sie das Element nach rechts und beobachten Sie das Overlay.

Scroll-Snap-Overlay.

Im Overlay werden Elementpositionen und Andockpunkte angezeigt.

Container

Ein HTML-Element ist ein Container, wenn es die CSS-Eigenschaft container-type hat. Solche Elemente haben container-Badges, mit denen die entsprechenden Overlays ein- und ausgeblendet werden können.

Schalten Sie das Overlay in der folgenden Vorschau ein:

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

Container-Overlay.

Im Overlay werden die Positionen der untergeordneten Elemente angezeigt.

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

Slot

Das <slot>-HTML-Element ist ein Platzhalter, den Sie mit eigenen Inhalten füllen können. Mit dem <template>-Element können Sie mit <slot> separate DOM-Bäume erstellen und zusammen darstellen. Neben den Inhaltselementen für Slots befindet sich das Badge slot, das als Link zu den entsprechenden Slots dient.

Sehen Sie sich das slot-Symbol in der folgenden Vorschau an:

  1. Element in der Vorschau untersuchen
  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-Symbol, um zum Inhalt des Slots zurückzukehren.

Oberste Ebene

Dieses Symbol hilft Ihnen, das Konzept der obersten 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, legt der Browser es in die oberste Ebene.

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

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

Sehen Sie sich das top-layer (N)-Symbol in der folgenden Vorschau an:

  1. Klicken Sie in der Vorschau auf Dialogfeld öffnen.
  2. Dialogfeld prüfen
  3. Klicken Sie in der DOM-Baumstruktur neben dem <dialog>-Element auf das Badge top-layer (1). Über den Bereich Elemente gelangen Sie zum entsprechenden Element im #top-layer-Container nach dem schließenden </html>-Tag. Der Container und das Logo der obersten Ebene.
  4. Klicken Sie auf das Badge reveal neben dem Element oder seinem ::backdrop, um zum <dialog>-Element zurückzukehren.

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 Media zu öffnen und Ihre Media 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 Media-Bereich debuggen.

Pop-over

Ein Popover ist ein beliebiges Element mit einem popover-Attribut. Es ist für eine Vielzahl interaktiver Muster nützlich, darunter Tooltips, Benachrichtigungen und Pop-up-Meldungen. Solche Elemente sind mit popover-Badges gekennzeichnet.

Mit diesem Badge wird ein top-layer-Badge daneben ein- oder ausgeblendet, das auf die entsprechenden Elemente im #top-layer-Container verweist.

Hier sehen Sie eine Vorschau des popover-Logos:

  1. Klicken Sie in der Vorschau auf POPOVER EIN-/AUSSCHALTEN.
  2. Sehen Sie sich das Pop-over an, das angezeigt wird.

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

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

  4. Folgen Sie der Anleitung im Abschnitt Top-Layer.

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

Startstil

Mit der @starting-style-Regel werden die ursprünglichen Formatierungen eines Elements definiert, bevor es auf der Seite gerendert wird. Dies ist für Elemente erforderlich, die aus display: none animiert werden, da sie einen Status benötigen, aus dem sie animiert werden können. Solche Elemente sind mit starting-style-Badges gekennzeichnet.

Mit diesem Badge werden die Formatierungen in der @starting-style-Regel umgeschaltet, damit Sie die Animation in Aktion sehen können.

Hier sehen Sie eine Vorschau des starting-style-Logos:

  1. Klicken Sie in der Vorschau auf POPOVER ÖFFNEN.
  2. Prüfen Sie das angezeigte Pop-over.

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

    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-overs animieren.