Referentie voor badges

Wissel tussen verschillende overlays en versnel de navigatie in de DOM-boomstructuur met deze uitgebreide referentie van badges in het deelvenster Elementen.

Badges tonen of verbergen

Zo toon of verberg je bepaalde badges:

1. Open DevTools.
2. Klik met de rechtermuisknop op een element in de DOM-boomstructuur en vink een of meer badges aan in het submenu Badge-instellingen.

In het deelvenster Elementen staan de geselecteerde badges naast de juiste elementen in de DOM-boomstructuur. In de volgende gedeelten wordt elke badge uitgelegd.

Bron bekijken

De badge view-source staat naast de tag <html> in de hoofdmap van de HTML-pagina. Klik erop om de bron van je pagina te bekijken in het deelvenster Bronnen.

Deze badge biedt een alternatieve workflow voor de optie Paginabron bekijken in het contextmenu van de pagina (rechtermuisknop) van Chrome:

1. Klik in Chrome met de rechtermuisknop op een pagina en selecteer Inspecteren.
2. Klik in het deelvenster Elementen op de badge view-source naast de tag <html>.
3. Inspecteer de paginabron in het deelvenster Bronnen.

Raster

Een HTML-element is een rastercontainer als de CSS-property display is ingesteld op grid of inline-grid. Dergelijke elementen hebben grid-badges ernaast waarmee de bijbehorende overlays worden aan- of uitgezet.

Zet de overlay aan voor het volgende voorbeeld:

1. Inspecteer het element in het voorbeeld.
2. Klik in de DOM-boomstructuur op de badge grid naast het element en bekijk de overlay.

De overlay toont kolommen, rijen, de nummers ervan en de hiaten.

Ga naar CSS-raster inspecteren voor meer informatie over hoe je rasterindelingen debugt.

Subraster

Een subraster is een genest raster dat dezelfde sporen gebruikt als het bovenliggende raster. Een element is een subgrid-container als een of beide van de eigenschappen grid-template-columns, grid-template-rows zijn ingesteld op subgrid. Dergelijke elementen hebben subgrid-badges ernaast waarmee je de bijbehorende overlays aan- of uitzet.

Zet de overlay aan voor het volgende voorbeeld:

1. Inspecteer het element in het voorbeeld.
2. Klik in de DOM-boomstructuur op de badge subgrid naast het element en bekijk de overlay.

De overlay toont kolommen, rijen, hun nummers en tussenruimtes van een subraster.

Flex

Een HTML-element is een flexcontainer als de CSS-property display is ingesteld op flex of inline-flex. Dergelijke elementen hebben flex-badges ernaast waarmee je de bijbehorende overlays aan- of uitzet.

Zet de overlay aan of uit in het volgende voorbeeld:

1. Inspecteer het element in het voorbeeld.
2. Klik in de DOM-boomstructuur op de badge flex naast het element en neem de overlay waar.

De overlay toont de posities van onderliggende elementen.

Ga naar CSS Flexbox inspecteren en fouten opsporen voor meer informatie over hoe je fouten opspoort in flexibele indelingen.

Advertentie

DevTools kan sommige advertentieframes detecteren en taggen. Naast deze frames staan ad-badges.

Ontdek een advertentie in het volgende voorbeeld:

1. Inspecteer het element in het voorbeeld.
2. Zoek in de DOM-boomstructuur een element met de badge ad ernaast.

De badge ad is niet klikbaar, maar als u de muisaanwijzer erop plaatst, verschijnt er een tooltip met context over waarom het element is geïdentificeerd als advertentie, zoals:

• Scriptafstamming: welke scripts betrokken waren bij het maken van het element.
• Regels voor filterlijst: De specifieke regel uit een filterlijst (bijvoorbeeld EasyList) die overeenkomt met het element of de bron die is geladen.

U kunt ook het tabblad Weergave gebruiken om advertentieframes rood te markeren.

Scrollen

Een HTML-element is een scrollcontainer als de CSS-property overflow is ingesteld op scroll of auto als er voldoende content is om overloop te veroorzaken. Dergelijke elementen hebben scroll-badges ernaast.

Scrolluitlijning

Scrollcontainers kunnen css-property's hebben die uitlijnpunten instellen. Dergelijke elementen hebben scroll-snap-badges ernaast waarmee de bijbehorende overlays worden aan- of uitgezet.

Zet de overlay aan voor het volgende voorbeeld:

1. Inspecteer het element in het voorbeeld.
2. Klik in de DOM-boomstructuur op de badge scroll-snap naast het element.
3. Scroll het element naar rechts en bekijk de overlay.

De overlay toont elementposities en uitlijnpunten.

Container

Een HTML-element is een container als het de CSS-property container-type heeft. Dergelijke elementen hebben container-badges ernaast waarmee je de bijbehorende overlays aan- of uitzet.

Zet de overlay aan voor het volgende voorbeeld:

1. Inspecteer het element in het voorbeeld.
2. Klik in de DOM-boomstructuur op de badge container naast het element.
3. Probeer het formaat van het element te wijzigen door de hoek rechtsonder te slepen en neem de lay-outwijziging en de overlay waar.

De overlay toont de posities van onderliggende elementen.

Ga naar CSS-containerquery's inspecteren en fouten opsporen voor meer informatie over hoe je fouten in containerquery's opspoort.

Positie

Het <slot> HTML-element is een tijdelijke aanduiding die je kunt vullen met je eigen content. Samen met het element <template> kun je met <slot> afzonderlijke DOM-boomstructuren maken en deze samen presenteren. Naast elementen van de ruimtecontent staan ink_selectionslot-badges die dienen als links naar de bijbehorende ruimtes.

Ontdek de badge ink_selectionslot in het volgende voorbeeld:

1. Inspecteer het element in het voorbeeld.
2. Klik in de DOM-boomstructuur op de badge ink_selectionslot naast het element om de bijbehorende ruimte te vinden.
3. Ga terug naar de content van de slot door op de badge ink_selectionreveal te klikken.

Bovenlaag

Met deze badge krijg je inzicht in het concept van de bovenste laag en kun je deze visualiseren. De bovenste laag geeft content weer boven alle andere lagen, ongeacht z-index. Als je een <dialog>-element opent met de .showModal()-methode, plaatst de browser het in de bovenste laag.

Het deelvenster Elementen voegt een #top-layer-container toe aan de DOM-boomstructuur na de afsluitende </html>-tag om je te helpen elementen van de bovenste laag te visualiseren.

Naast elementen in de bovenste laag staan ink_selectiontop-layer (N)-badges, waarbij N het indexnummer van het element is. De badges zijn links naar de bijbehorende elementen in de #top-layer-container.

Ontdek de badge ink_selectiontop-layer (N) in dit voorbeeld:

1. Klik in het voorbeeld op Dialoogvenster openen.
2. Inspecteer het dialoogvenster.
3. Klik in de DOM-boomstructuur op de badge ink_selectiontop-layer (1) naast het element <dialog>. Het deelvenster Elementen brengt je naar het bijbehorende element in de container #top-layer na de afsluitende tag </html>.
4. Ga terug naar het element <dialog> door op de badge ink_selectionreveal naast het element of de ::backdrop te klikken.

Media

De media-badge staat standaard uit. Als deze functie aanstaat, verschijnt deze naast <audio>- en <video>-elementen. Klik op deze badge om het deelvenster Media te openen en fouten in je media op te sporen.

Ga naar Debug media players with the Media panel (Mediaspelers debuggen met het deelvenster Media) voor meer informatie.

Pop-over

Een popover is een element met een popover-kenmerk en is nuttig voor een breed scala aan interactieve patronen, waaronder tooltips, meldingen en toasts. Zulke elementen hebben een popover-badge ernaast.

Deze badge zet een badge top-layer ernaast aan die linkt naar de bijbehorende elementen in de container #top-layer.

In het volgende voorbeeld vind je de popover-badge:

1. Klik in het voorbeeld op POPOVER AAN-/UITZETTEN.
2. Inspecteer de popover die verschijnt.

3. Klik in de DOM-boomstructuur op de badge popover naast het element <div popover>. In het deelvenster Elementen staat de badge top-layer.

   

4. Volg de stappen in het gedeelte Bovenste laag.

Ga naar https://web.dev/learn/css/popover-and-dialog voor meer informatie.

Startstijl

De @starting-style-regel definieert de beginstijlen van een element voordat het op de pagina wordt weergegeven. Dit is vereist voor elementen die binnenkomen vanuit display: none, omdat ze een status nodig hebben van waaruit ze binnenkomen. Zulke elementen hebben een starting-style-badge ernaast.

Deze badge zet de stijlen in de regel @starting-style aan of uit, zodat je de animatie in actie kunt zien.

Ontdek de starting-style-badge in het volgende voorbeeld:

1. Klik in het voorbeeld op POPOVER OPENEN.
2. Inspecteer de popover die verschijnt.

3. Zet in de DOM-boomstructuur de badge starting-style aan naast het element <div popover>.

   

4. Bekijk de animatie in actie en de stijlen die worden toegepast op het tabblad Elementen > Stijlen.

Ga naar Pop-overs animeren voor meer informatie.

Aangepast element

Aangepaste HTML-elementen die worden geïdentificeerd door tagnamen met een koppelteken of is="..."-kenmerken voor aangepaste ingebouwde elementen, hebben custom-element-badges naast zich in de DOM-boomstructuur.

Klik op de badge om naar de relevante code in het deelvenster Bronnen te gaan.