Informazioni sui badge

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:

1. Apri DevTools.
2. Fai clic con il tasto destro del mouse su un elemento nella struttura DOM e seleziona Impostazioni badge….
3. 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:

1. Ispeziona l'elemento nell'anteprima.
2. 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:

1. Esamina l'elemento nell'anteprima.
2. 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:

1. Ispeziona l'elemento nell'anteprima.
2. 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:

1. Esamina l'elemento nell'anteprima.
2. 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:

1. Ispeziona l'elemento nell'anteprima.
2. Nella struttura DOM, fai clic sul badge scroll-snap accanto all'elemento.
3. 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:

1. Ispeziona l'elemento nell'anteprima.
2. Nella struttura DOM, fai clic sul badge container accanto all'elemento.
3. 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 ink_selectionslot che fungono da link alle aree corrispondenti.

Scopri il badge ink_selectionslot nella seguente anteprima:

1. Ispeziona l'elemento nell'anteprima.
2. Nella struttura DOM, fai clic sul badge ink_selectionslot accanto all'elemento per individuare lo slot corrispondente.
3. Torna ai contenuti dello spazio facendo clic sul badge ink_selectionreveal.

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 ink_selectiontop-layer (N), dove N è il numero di indice dell'elemento. I badge sono link agli elementi corrispondenti nel contenitore #top-layer.

Scopri il badge ink_selectiontop-layer (N) nell'anteprima seguente:

1. Nell'anteprima, fai clic su Apri finestra di dialogo.
2. Esamina la finestra di dialogo.
3. Nella struttura ad albero DOM, fai clic sul badge ink_selectiontop-layer (1) accanto all'elemento <dialog>. Il riquadro Elementi ti indirizza all'elemento corrispondente nel contenitore #top-layer dopo il tag </html> di chiusura.
4. Torna all'elemento <dialog> facendo clic sul badge ink_selectionreveal 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.