Badgereferentie

Sofia Emelianova
Sofia Emelianova
GitHub

Schakel verschillende overlays in en uit en versnel de navigatie in de DOM-structuur met dit uitgebreide overzicht van badges in het paneel Elementen .

Badges weergeven of verbergen

Om bepaalde badges weer te geven of te verbergen:

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

Het menu 'Badge-instellingen'.

Het paneel 'Elementen' toont de geselecteerde badges naast de bijbehorende elementen in de DOM-structuur. In de volgende paragrafen wordt elke badge toegelicht.

Broncode bekijken

Het pictogram view-source bevindt zich naast de <html> -tag in de hoofdmap van de HTML-pagina. Klik erop om de broncode van uw pagina in het paneel 'Bronnen' te bekijken.

Het 'broncode bekijken'-icoontje.

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

  1. In Chrome: klik met de rechtermuisknop > Pagina inspecteren .
  2. Klik in het paneel Elementen op het pictogram ' view-source naast de <html> -tag.
  3. Bekijk de paginabron in het paneel Bronnen .

Rooster

Een HTML-element is een gridcontainer als de CSS-eigenschap ` display is ingesteld op grid of inline-grid . Dergelijke elementen hebben grid ernaast waarmee de bijbehorende overlays kunnen worden in- of uitgeschakeld.

Schakel de overlay in de volgende preview in of uit:

  1. Inspecteer het element in de preview.
  2. Klik in de DOM-structuur op het grid naast het element en bekijk de overlay.

Rasteroverlay.

De overlay toont kolommen, rijen, hun aantallen en tussenruimtes.

Zie Inspect CSS grid voor meer informatie over het debuggen van gridlay-outs.

Subraster

Een subgrid 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 en grid-template-rows zijn ingesteld op subgrid . Dergelijke elementen hebben subgrid badges ernaast waarmee de bijbehorende overlays kunnen worden in- of uitgeschakeld.

Schakel de overlay in de volgende preview in of uit:

  1. Inspecteer het element in de preview.
  2. Klik in de DOM-structuur op het subgrid -icoontje naast het element en bekijk de overlay.

Subrasteroverlay.

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

Buigen

Een HTML-element is een flexcontainer als de CSS-eigenschap ` display is ingesteld op flex of inline-flex . Dergelijke elementen hebben flex ernaast waarmee de bijbehorende overlays kunnen worden in- of uitgeschakeld.

Schakel de overlay in de volgende preview in of uit:

  1. Inspecteer het element in de preview.
  2. Klik in de DOM-structuur op het flex icoontje naast het element en bekijk de overlay.

Flexibele overlay.

De overlay toont de posities van de onderliggende elementen.

Om te leren hoe je flex-layouts kunt debuggen, zie Inspecteren en debuggen van CSS flexbox .

DevTools kan bepaalde advertentieframes detecteren en taggen . Zulke frames hebben ad ernaast.

Ontdek een advertentie in de volgende preview:

  1. Inspecteer het element in de preview.
  2. Zoek in de DOM-structuur naar een element met het ad ernaast.

Advertentiebadge.

Het ad is niet aanklikbaar, maar u kunt het tabblad 'Rendering' gebruiken om advertentiekaders rood te markeren .

Rol

Een HTML-element is een scrollcontainer als de CSS-eigenschap ` overflow is ingesteld op scroll , of auto wanneer er voldoende inhoud is om overloop te veroorzaken. Dergelijke elementen hebben scroll ernaast.

Scrollbadge op een DOM-boomknooppunt.

Scroll-snap

Scrollcontainers kunnen CSS-eigenschappen hebben waarmee snap-punten kunnen worden geconfigureerd . Dergelijke elementen hebben scroll-snap badges ernaast waarmee de bijbehorende overlays kunnen worden in- of uitgeschakeld.

Schakel de overlay in de volgende preview in of uit:

  1. Inspecteer het element in de preview.
  2. Klik in de DOM-structuur op het scroll-snap icoontje naast het element.
  3. Probeer het element naar rechts te schuiven en bekijk de overlay.

Scroll-snap overlay.

De overlay toont de posities van de elementen en de bevestigingspunten.

Container

Een HTML-element is een container als het de CSS-eigenschap ` container-type heeft. Dergelijke elementen hebben container ernaast waarmee de bijbehorende overlays kunnen worden in- of uitgeschakeld.

Schakel de overlay in de volgende preview in of uit:

  1. Inspecteer het element in de preview.
  2. Klik in de DOM-structuur op het container naast het element.
  3. Probeer het element te vergroten of verkleinen door de rechteronderhoek te verslepen en observeer hoe de lay-out verandert en hoe elementen over elkaar heen vallen.

Containeroverlay.

De overlay toont de posities van de onderliggende elementen.

Zie Inspecteren en debuggen van CSS-containerquery's voor meer informatie over het debuggen van containerquery's.

Sleuf

Het HTML-element <slot> is een placeholder die u kunt vullen met uw eigen inhoud. Samen met het element <template> kunt u met <slot> afzonderlijke DOM-structuren creëren en deze samen presenteren. Slot-inhoudselementen hebben slot ernaast die als links naar de corresponderende slots dienen.

Ontdek de badge slot in de volgende preview:

  1. Inspecteer het element in de preview.
  2. Klik in de DOM-structuur op het slot naast het element om het bijbehorende slot te vinden. Plaats de badges in de sleuf en onthul ze.
  3. Ga terug naar de inhoud van de gokkast door op de badge reveal te klikken.

Bovenste laag

Deze badge helpt je het concept van de bovenste laag te begrijpen en te visualiseren. De bovenste laag rendert inhoud boven alle andere lagen, ongeacht de z-index . Wanneer je een <dialog> -element opent met de .showModal() methode , plaatst de browser dit in de bovenste laag.

Om u te helpen de elementen op de bovenste laag te visualiseren, voegt het paneel Elementen een #top-layer container toe aan de DOM-structuur na de afsluitende </html> -tag.

Elementen in de bovenste laag hebben top-layer (N) badges ernaast, waarbij N het indexnummer van het element is. De badges zijn links naar de corresponderende elementen in de #top-layer container.

Ontdek de badge top-layer (N) in de volgende preview:

  1. Klik in het voorbeeldvenster op 'Dialoogvenster openen' .
  2. Bekijk het dialoogvenster .
  3. Klik in de DOM-structuur op de badge top-layer (1) naast het <dialog> -element. Het paneel Elementen brengt u naar het overeenkomstige element in de #top-layer -container na de afsluitende </html> -tag. De bovenste laag van de verpakking en het logo.
  4. Ga terug naar het <dialog> -element door op de badge reveal te klikken naast het element of de ::backdrop ervan.

Media

Het media is standaard uitgeschakeld. Wanneer het is ingeschakeld , verschijnt het naast de elementen <audio> en <video> . Klik op dit pictogram om het mediapaneel te openen en uw media te debuggen.

De mediabadge is ingeschakeld in de badge-instellingen en wordt naast het video-element weergegeven.

Zie voor meer informatie Mediaspelers debuggen met het Media-paneel .

Popover

Een popover is elk element met een popover attribuut en is bruikbaar voor een breed scala aan interactieve patronen, waaronder tooltips, alerts, toasts en meer. Dergelijke elementen hebben popover badge ernaast.

Deze badge activeert een badge top-layer ernaast, die linkt naar de overeenkomstige elementen in de #top-layer container.

Ontdek de popover badge in de volgende preview:

  1. Klik in de preview op POPOVER IN-/UITSCHAKELEN .
  2. Bekijk het pop-upvenster dat verschijnt.

  3. Klik in de DOM-structuur op het popover icoontje naast het <div popover> -element. In het paneel Elementen wordt het icoontje top-layer weergegeven.

    Het popover-icoontje naast het element met een popover-attribuut.

  4. Volg de stappen in het gedeelte 'Bovenste laag' .

Voor meer informatie, zie ook https://web.dev/learn/css/popover-and-dialog .

Startstijl

De @starting-style regel definieert de initiële stijlen van een element voordat het op de pagina wordt weergegeven. Dit is nodig voor elementen die vanuit display: none animeren , omdat ze een staat nodig hebben van waaruit ze kunnen animeren. Dergelijke elementen hebben starting-style badge ernaast.

Met deze badge kun je de stijlen in de @starting-style regel in- of uitschakelen, zodat je de animatie in actie kunt zien.

Ontdek de badge starting-style in de volgende preview:

  1. Klik in de preview op OPEN POPOVER .
  2. Bekijk het pop-upvenster dat verschijnt.

  3. Schakel in de DOM-structuur de badge starting-style naast het <div popover> -element in of uit.

    Het badge voor de startstijl naast het element met de @starting-style regel.

  4. Bekijk de animatie in actie en de toegepaste stijlen in het tabblad Elementen > Stijlen .

Zie ook Popovers animeren voor meer informatie.