Informazioni sui badge

Attiva/disattiva vari overlay e accelera la navigazione nell'albero del DOM con questo riferimento completo di badge nel riquadro Elementi.

Mostra o nascondi le medaglie

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 nell'albero DOM. Nelle sezioni successive viene spiegato ogni badge.

Griglia

Un elemento HTML è un contenitore griglia se la relativa proprietà CSS display è impostata su grid o inline-grid. Accanto a questi elementi è presente un badge grid che attiva o disattiva gli overlay corrispondenti.

Attiva/disattiva l'overlay nella seguente anteprima:

1. Ispeziona l'elemento nell'anteprima.
2. Nell'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 informazioni su come eseguire il debug del layout 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 se una o entrambe le sue proprietà grid-template-columns e grid-template-rows sono impostate su subgrid. Accanto a questi elementi è presente un badge subgrid che attiva o disattiva gli overlay corrispondenti.

Attiva/disattiva l'overlay nella seguente anteprima:

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

Flex

Un elemento HTML è un contenitore flessibile se la relativa proprietà CSS display è impostata su flex o inline-flex. Accanto a questi elementi è presente un badge flex che attiva o disattiva gli overlay corrispondenti.

Attiva/disattiva l'overlay nella seguente anteprima:

1. Ispeziona l'elemento nell'anteprima.
2. Nell'albero DOM, fai clic sul badge flex accanto all'elemento e osserva l'overlay.

L'overlay mostra le posizioni degli elementi secondari.

Per informazioni su come eseguire il debug dei layout flessibili, consulta Esaminare ed eseguire il debug di flexbox CSS ed eseguirne il debug.

Annuncio

DevTools è in grado di rilevare alcuni frame degli annunci e di taggarli. Accanto a questi frame è presente un badge ad.

Scopri un annuncio nella seguente anteprima:

1. Ispeziona l'elemento nell'anteprima.
2. Nell'albero DOM, trova un elemento con il badge ad accanto.

Il badge ad non è cliccabile, ma puoi utilizzare la scheda Rendering per evidenziare i frame degli annunci in rosso.

Scorri e scatta

Un elemento HTML è un contenitore di scorrimento se la relativa proprietà CSS overflow è impostata su scroll oppure auto quando ci sono contenuti sufficienti a causare l'overflow. I contenitori di scorrimento possono avere proprietà CSS che configurano gli agganciamenti. Accanto a questi elementi è presente un badge scroll-snap che attiva o disattiva gli overlay corrispondenti.

Attiva/disattiva l'overlay nella seguente anteprima:

1. Ispeziona l'elemento nell'anteprima.
2. Nell'albero DOM, fai clic sul badge scroll-snap accanto all'elemento.
3. Prova a far scorrere l'elemento verso destra e osserva l'overlay.

L'overlay mostra le posizioni degli elementi e i punti di agganciamento.

Container

Un elemento HTML è un contenitore se ha la proprietà CSS container-type. Accanto a questi elementi è presente un badge container che attiva o disattiva gli overlay corrispondenti.

Attiva/disattiva l'overlay nella seguente anteprima:

1. Ispeziona l'elemento nell'anteprima.
2. Nell'albero DOM, fai clic sul badge container accanto all'elemento.
3. Prova a ridimensionare l'elemento trascinando l'angolo in basso a destra e osserva le modifiche del layout e l'overlay.

L'overlay mostra le posizioni degli elementi secondari.

Per informazioni su come eseguire il debug delle query contenitore, consulta Esaminare ed eseguire il debug delle query contenitore CSS.

Area

L'elemento HTML <slot> è un segnaposto che puoi riempire con i tuoi contenuti. Insieme all'elemento <template>, <slot> consente di creare alberi DOM separati e presentarli insieme. Accanto agli elementi dei contenuti delle aree annuncio ci sono badge slot che fungono da link alle aree corrispondenti.

Scopri il badge slot nella seguente anteprima:

1. Ispeziona l'elemento nell'anteprima.
2. Nell'albero 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 visualizzati 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) nella seguente anteprima:

1. Nell'anteprima, fai clic su Apri finestra di dialogo.
2. Esamina la finestra di dialogo.
3. Nell'albero DOM, fai clic sul badge top-layer (1) accanto all'elemento <dialog>. Il riquadro Elementi visualizza l'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 l'opzione è attiva, viene visualizzata accanto agli elementi <audio> e <video>. Fai clic su questo badge per aprire il riquadro Contenuti multimediali ed eseguire il debug dei contenuti multimediali.

Per ulteriori informazioni, consulta l'articolo Eseguire il debug dei media player con il riquadro Contenuti multimediali.