Informazioni sui badge

Attiva/disattiva varie sovrapposizioni e velocizza la navigazione nell'albero DOM con questo riferimento completo dei badge nel riquadro Elementi.

Mostrare o nascondere i badge

Per mostrare o nascondere determinati badge:

1. Apri DevTools.
2. Fai clic con il tasto destro del mouse su un elemento nell'albero DOM e seleziona uno o più badge nel sottomenu Impostazioni badge.

Il riquadro Elementi mostra i badge selezionati accanto agli elementi appropriati nell'albero DOM. Le sezioni successive spiegano ogni badge.

Visualizza origine

Il badge view-source si trova accanto al tag <html> alla radice della pagina HTML. Fai clic per visualizzare l'origine della pagina nel riquadro Origini.

Questo badge fornisce un flusso di lavoro alternativo all'opzione Visualizza origine pagina nel menu contestuale della pagina di Chrome (fai clic con il tasto destro del mouse):

1. In Chrome, fai clic con il tasto destro del mouse su una pagina > Ispeziona.
2. Nel riquadro Elementi, fai clic sul badge view-source accanto al tag <html>.
3. Ispeziona l'origine della pagina nel riquadro Origini.

Griglia

Un elemento HTML è un container della griglia se la relativa proprietà CSS display è impostata su grid o inline-grid. Questi elementi hanno badge grid accanto che attivano/disattivano le sovrapposizioni corrispondenti.

Attiva/disattiva la sovrapposizione nella seguente anteprima:

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

La sovrapposizione mostra colonne, righe, numeri e spazi vuoti.

Per scoprire come eseguire il debug del layout della griglia, consulta Ispezionare la griglia CSS.

Sottogriglia

Una sottogriglia è una griglia nidificata che utilizza le stesse tracce della griglia principale. Un elemento è un container della sottogriglia se una o entrambe le proprietà grid-template-columns e grid-template-rows sono impostate su subgrid. Questi elementi hanno badge subgrid accanto che attivano/disattivano le sovrapposizioni corrispondenti.

Attiva/disattiva la sovrapposizione nella seguente anteprima:

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

La sovrapposizione mostra colonne, righe, numeri e spazi vuoti di una sottogriglia.

Flex

Un elemento HTML è un container flessibile se la relativa proprietà CSS display è impostata su flex o inline-flex. Questi elementi hanno badge flex accanto che attivano/disattivano le sovrapposizioni corrispondenti.

Attiva/disattiva la sovrapposizione nella seguente anteprima:

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

La sovrapposizione mostra le posizioni degli elementi secondari.

Per scoprire come eseguire il debug dei layout flessibili, consulta Ispezionare ed eseguire il debug di CSS Flexbox.

Annuncio

DevTools può rilevare alcuni frame di annunci e taggarli. Questi frame hanno badge ad accanto.

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 è selezionabile, ma se passi il mouse sopra, vedrai un tooltip che fornisce il contesto sul motivo per cui l'elemento è stato identificato come annuncio, ad esempio:

• Script ancestry: gli script coinvolti nella creazione dell'elemento.
• Regole degli elenchi di filtri: la regola specifica di un elenco di filtri (ad esempio, EasyList) che corrisponde all'elemento o alla risorsa caricata.

Puoi anche utilizzare la scheda Rendering per evidenziare in rosso i frame degli annunci.

Scorri

Un elemento HTML è un container di scorrimento se la relativa proprietà CSS overflow è impostata su scroll o auto quando sono presenti contenuti sufficienti a causare l'overflow. Questi elementi hanno badge scroll accanto.

Scroll-snap

I container di scorrimento possono avere proprietà CSS che configurano i punti di ancoraggio. Questi elementi hanno badge scroll-snap accanto che attivano/disattivano le sovrapposizioni corrispondenti.

Attiva/disattiva la sovrapposizione 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 scorrere l'elemento verso destra e osserva la sovrapposizione.

La sovrapposizione mostra le posizioni degli elementi e i punti di ancoraggio.

Container

Un elemento HTML è un container se ha la proprietà CSS container-type. Questi elementi hanno badge container accanto che attivano/disattivano le sovrapposizioni corrispondenti.

Attiva/disattiva la sovrapposizione 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 la modifica del layout e della sovrapposizione.

La sovrapposizione mostra le posizioni degli elementi secondari.

Per scoprire come eseguire il debug delle query dei container, consulta Ispezionare ed eseguire il debug delle query dei container CSS.

Slot

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 presentarli insieme. Gli elementi di contenuti degli slot hanno ink_selectionslot badge accanto che fungono da link agli slot corrispondenti.

Scopri il ink_selectionslot badge nella seguente anteprima:

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

Top-layer

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 <dialog> elemento utilizzando il .showModal() metodo, il browser lo inserisce nel livello superiore.

Per aiutarti a visualizzare gli elementi del livello superiore, il riquadro Elementi aggiunge un container #top-layer all'albero DOM dopo il tag di chiusura </html>.

Gli elementi del livello superiore hanno ink_selectiontop-layer (N) badge accanto, dove N è il numero di indice dell'elemento. I badge sono link agli elementi corrispondenti nel container #top-layer.

Scopri il ink_selectiontop-layer (N) nella seguente anteprima:

1. Nell'anteprima, fai clic su Apri finestra di dialogo.
2. Ispeziona la finestra di dialogo.
3. Nell'albero DOM, fai clic sul ink_selectiontop-layer (1) badge accanto all'elemento <dialog>. Il riquadro Elementi ti porta all'elemento corrispondente nel container #top-layer dopo il tag di chiusura </html>.
4. Torna all'elemento <dialog> facendo clic sul badge ink_selectionreveal accanto all'elemento o al relativo ::backdrop.

Media

Il badge media è disattivato per impostazione predefinita. Quando è attivo, viene visualizzato accanto agli elementi <audio> e <video>. Fai clic su questo badge per aprire il riquadro Media ed eseguire il debug dei contenuti multimediali.

Per maggiori informazioni, consulta Eseguire il debug dei media player con il riquadro Media.

Popover

Un popover è un elemento con un attributo popover ed è utile per un'ampia gamma di pattern interattivi, tra cui suggerimenti, avvisi, toast e altro ancora. Questi elementi hanno badge popover accanto.

Questo badge attiva/disattiva un top-layer badge accanto che rimanda agli elementi corrispondenti nel #top-layer container.

Scopri il badge popover nella seguente anteprima:

1. Nell'anteprima, fai clic su TOGGLE POPOVER.
2. Ispeziona il popover visualizzato.

3. Nell'albero DOM, fai clic sul badge popover accanto all'elemento <div popover>. Il riquadro Elementi mostra il badge top-layer.

   

4. Segui i passaggi nella sezione `Livello superiore.

Per saperne di più, consulta anche https://web.dev/learn/css/popover-and-dialog.

Starting-style

La@starting-style regola definisce gli stili iniziali di un elemento prima che venga eseguito il rendering sulla pagina. Questo è necessario per gli elementi che vengono animati da display: none, in quanto hanno bisogno di uno stato da cui animare. Questi elementi hanno badge starting-style accanto.

Questo badge attiva/disattiva gli stili nella regola @starting-style, in modo che tu possa vedere l'animazione in azione.

Scopri il badge starting-style nella seguente anteprima:

1. Nell'anteprima, fai clic su OPEN POPOVER.
2. Ispeziona il popover visualizzato.

3. Nell'albero DOM, attiva/disattiva il badge starting-style accanto all'elemento <div popover>.

   

4. Osserva l'animazione in azione e gli stili applicati nella scheda Elementi > Stili.

Per saperne di più, consulta anche Animare i popover.

Custom-element

Gli elementi HTML personalizzati identificati da nomi di tag con trattino o is="..." attributi per gli elementi integrati personalizzati hanno custom-element badge accanto nell'albero DOM.

Fai clic sul badge per andare al codice pertinente nel riquadro Origini.