Attiva/disattiva i vari overlay e velocizza la navigazione ad albero del DOM con questo riferimento completo ai badge nel riquadro Elementi.
Mostra o nascondi i badge
Per mostrare o nascondere i badge:
- Apri DevTools.
- Fai clic con il tasto destro del mouse su un elemento nella struttura DOM e seleziona Impostazioni badge….
- Seleziona o deseleziona le caselle di controllo accanto ai badge scelti.
Il riquadro Elementi mostra i badge selezionati accanto agli elementi appropriati nell'albero DOM. Le sezioni successive illustrano tutti i badge.
Griglia
Un elemento HTML è un contenitore griglia se la relativa proprietà CSS display
è impostata su grid
o inline-grid
. Accanto a questi elementi sono presenti grid
badge che attivano/disattivano gli overlay corrispondenti.
Attiva/disattiva l'overlay nella seguente anteprima:
- Ispeziona l'elemento nell'anteprima.
- Nella struttura ad albero DOM, fai clic sul badge
grid
accanto all'elemento e osserva l'overlay.
L'overlay mostra colonne, righe, i relativi numeri e intervalli vuoti.
Per scoprire come eseguire il debug del layout a griglia, consulta Esaminare la griglia CSS.
Sottostruttura
Una griglia secondaria è una griglia nidificata che utilizza le stesse tracce della griglia principale. Un elemento è un contenitore della griglia secondaria se una o entrambe le sue proprietà grid-template-columns
, grid-template-rows
sono impostate su subgrid
. Accanto a questi elementi sono presenti subgrid
badge che attivano/disattivano gli overlay corrispondenti.
Attiva/disattiva l'overlay nella seguente anteprima:
- Esamina l'elemento nell'anteprima.
- Nella struttura DOM, fai clic sul badge
subgrid
accanto all'elemento e osserva l'overlay.
La sovrapposizione mostra le colonne, le righe, i relativi numeri e gli spazi di una sottogriglia.
Flex
Un elemento HTML è un contenitore flessibile se la relativa proprietà CSS display
è impostata su flex
o inline-flex
. Questi elementi sono contrassegnati da badge flex
che attivano/disattivano gli overlay corrispondenti.
Attiva/disattiva l'overlay nella seguente anteprima:
- Ispeziona l'elemento nell'anteprima.
- Nella struttura ad albero DOM, fai clic sul badge
flex
accanto all'elemento e osserva l'overlay.
La sovrapposizione mostra le posizioni degli elementi secondari.
Per scoprire come eseguire il debug dei layout flessibili, consulta Ispezionare e eseguire il debug di flexbox CSS.
Annuncio
DevTools è in grado di rilevare alcuni frame degli annunci e taggarli. Questi frame sono contrassegnati da badge ad
.
Scopri un annuncio nella seguente anteprima:
- Esamina l'elemento nell'anteprima.
- Individua un elemento con accanto il badge
ad
nell'albero DOM.
Il badge ad
non è cliccabile, ma puoi utilizzare la scheda Rendering per evidenziare i frame degli annunci in rosso.
Scorrimento rapido
Un elemento HTML è un contenitore con scorrimento se la relativa proprietà CSS overflow
è impostata su scroll
o auto
quando ci sono contenuti sufficienti per causare un overflow. I contenitori di scorrimento possono avere proprietà CSS che configurano i punti di agganciamento. Questi elementi sono contrassegnati da badge scroll-snap
che attivano/disattivano gli overlay corrispondenti.
Attiva/disattiva l'overlay per la seguente anteprima:
- Ispeziona l'elemento nell'anteprima.
- Nella struttura DOM, fai clic sul badge
scroll-snap
accanto all'elemento. - Prova a scorrere l'elemento verso destra e osserva l'overlay.
L'overlay mostra le posizioni e i punti di agganciamento degli elementi.
Container
Un elemento HTML è un contenitore se ha la proprietà CSS container-type
. Questi elementi sono contrassegnati da badge container
che attivano/disattivano gli overlay corrispondenti.
Attiva/disattiva l'overlay nella seguente anteprima:
- Ispeziona l'elemento nell'anteprima.
- Nella struttura DOM, fai clic sul badge
container
accanto all'elemento. - Prova a ridimensionare l'elemento trascinandone l'angolo in basso a destra e osserva la modifica del layout e la sovrapposizione.
L'overlay mostra le posizioni degli elementi secondari.
Per scoprire come eseguire il debug delle query dei contenitori, consulta Esaminare ed eseguire il debug delle query dei contenitori CSS.
Area
L'elemento HTML <slot>
è un segnaposto che puoi riempire con i tuoi contenuti. Insieme all'elemento <template>
, <slot>
ti consente di creare alberi DOM separati e di presentarli insieme. Accanto agli elementi dei contenuti delle aree annuncio sono presenti badge slot
che fungono da link alle aree corrispondenti.
Scopri il badge slot
nella seguente anteprima:
- Ispeziona l'elemento nell'anteprima.
- Nella struttura DOM, fai clic sul badge
slot
accanto all'elemento per individuare lo slot corrispondente. - Torna ai contenuti dello spazio facendo clic sul badge
reveal
.
Livello superiore
Questo badge ti aiuta a comprendere il concetto di livello superiore e a visualizzarlo. Il livello superiore esegue il rendering dei contenuti sopra tutti gli altri livelli, indipendentemente da z-index
. Quando apri un elemento <dialog>
utilizzando il metodo .showModal()
, il browser lo inserisce nel livello superiore.
Per aiutarti a visualizzare gli elementi del livello superiore, il riquadro Elementi aggiunge un contenitore #top-layer
all'albero DOM dopo il tag </html>
di chiusura.
Accanto agli elementi del livello superiore sono presenti i badge top-layer (N)
, dove N
è il numero di indice dell'elemento. I badge sono link agli elementi corrispondenti nel contenitore #top-layer
.
Scopri il badge top-layer (N)
nell'anteprima seguente:
- Nell'anteprima, fai clic su Apri finestra di dialogo.
- Esamina la finestra di dialogo.
- Nella struttura ad albero DOM, fai clic sul badge
top-layer (1)
accanto all'elemento<dialog>
. Il riquadro Elementi ti indirizza all'elemento corrispondente nel contenitore#top-layer
dopo il tag</html>
di chiusura. - Torna all'elemento
<dialog>
facendo clic sul badgereveal
accanto all'elemento o alla relativa::backdrop
.
Media
Il badge media
è disattivato per impostazione predefinita. Se attivata, viene visualizzata accanto agli elementi <audio>
e <video>
. Fai clic su questo badge per aprire il riquadro Contenuti multimediali ed eseguire il debug dei tuoi contenuti multimediali.
Per ulteriori informazioni, consulta Eseguire il debug dei lettori multimediali con il riquadro dei contenuti multimediali.