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 le medaglie:

1. Apri DevTools.
2. Fai clic con il pulsante destro del mouse su un elemento nell'albero 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 nella struttura 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 per la seguente anteprima:

1. Esamina 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.

Griglia secondaria

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 per la seguente anteprima:

1. Esamina l'elemento nell'anteprima.
2. Nella struttura ad albero DOM, fai clic sul badge subgrid accanto all'elemento e osserva l'overlay.

L'overlay mostra colonne, righe, i relativi numeri e intervalli vuoti di una griglia secondaria.

Flex

Un elemento HTML è un contenitore flessibile se la relativa proprietà CSS display è impostata su flex o inline-flex. Accanto a questi elementi sono presenti flex badge che attivano/disattivano gli overlay corrispondenti.

Attiva/disattiva l'overlay per la seguente anteprima:

1. Esamina l'elemento nell'anteprima.
2. Nella struttura ad albero DOM, fai clic sul badge flex accanto all'elemento e osserva l'overlay.

L'overlay mostra le posizioni degli elementi secondari.

Per scoprire come eseguire il debug dei layout flessibili, consulta Esaminare ed eseguire il debug delle flexbox CSS.

Annuncio

DevTools è in grado di rilevare alcuni frame degli annunci e taggarli. Questi frame hanno ad badge accanto.

Scopri un annuncio nella seguente anteprima:

1. Esamina l'elemento nell'anteprima.
2. Individua un elemento con accanto il badge ad nell'albero DOM.

Non è possibile fare clic sul badge ad, ma puoi utilizzare la scheda Rendering per evidenziare i frame degli annunci in rosso.

Scorrimento rapido

Un elemento HTML è un contenitore di scorrimento se la relativa proprietà CSS overflow è impostata su scroll o su auto quando è disponibile un contenuto sufficiente per causare un overflow. I contenitori di scorrimento possono avere proprietà CSS che configurano i punti di agganciamento. Accanto a questi elementi sono presenti scroll-snap badge che attivano/disattivano gli overlay corrispondenti.

Attiva/disattiva l'overlay per la seguente anteprima:

1. Esamina l'elemento nell'anteprima.
2. Nella struttura ad albero 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. Accanto a questi elementi sono presenti container badge che attivano/disattivano gli overlay corrispondenti.

Attiva/disattiva l'overlay per la seguente anteprima:

1. Esamina l'elemento nell'anteprima.
2. Nella struttura ad albero 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 informazioni su come eseguire il debug delle query del contenitore, consulta Esaminare ed eseguire il debug delle query sui 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 strutture DOM separate e di presentarle insieme. Accanto agli elementi dei contenuti delle aree annuncio sono presenti slot badge che fungono da link alle aree corrispondenti.

Scopri il badge slot nella seguente anteprima:

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

Livello superiore

Questo badge ti aiuta a comprendere il concetto del 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 top-layer (N) badge, 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) nella seguente anteprima:

1. Nell'anteprima, fai clic su Apri finestra di dialogo.
2. Esamina la finestra di dialogo.
3. Nella struttura 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.
4. Torna all'elemento <dialog> facendo clic sul badge reveal accanto all'elemento o al relativo ::backdrop.

Contenuti multimediali

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.