Utilizza il riquadro Elementi per esaminare e modificare gli elementi DOM.
Panoramica
Il riquadro Elementi fornisce un'interfaccia robusta per esaminare e manipolare il DOM. Puoi utilizzare l'albero DOM, che assomiglia a un documento HTML, per selezionare nodi DOM specifici e modificarli con altri strumenti.
Il riquadro Elementi contiene anche le seguenti schede con strumenti pertinenti:
Stili:
- Visualizza ed esegui il debug delle regole CSS applicate a un elemento da tutti i fogli di stile.
- Trova eventuali CSS non validi, sostituiti, inattivi o di altro tipo che non funzionano come previsto.
- Modifica gli elementi aggiungendo una dichiarazione, applicando una classe e interagendo con il modello a riquadri.
- Accedi alle opzioni di modifica dei contenitori con i badge che si trovano nell'albero DOM.
Calcolato: elenca le proprietà risolte applicate a un elemento così come vengono visualizzate da Chrome.
Layout: contiene le opzioni per modificare le sovrapposizioni di griglia e flexbox.
Listener di eventi: elenca tutti i listener di eventi e i relativi attributi. Consente di trovare l'origine dei listener di eventi e di filtrare i listener passivi o di blocco.
Punti di interruzione DOM: elenca i punti di interruzione delle modifiche DOM aggiunti dal riquadro Elementi e consente di attivarli, disattivarli, rimuoverli o mostrarli.
Proprietà: seleziona un nodo DOM per esaminare e ordinare le proprietà proprie e ereditate dell'oggetto.
Accessibilità: elenca gli elementi con etichette ARIA e le relative proprietà. Consente di attivare/disattivare ed esaminare un albero di accessibilità (sperimentale).
Apri il riquadro Elementi
Per impostazione predefinita, quando apri DevTools si apre il riquadro Elementi. Puoi anche esaminare un nodo in qualsiasi punto della pagina per aprire automaticamente il riquadro Elementi.
Per aprire manualmente il riquadro Elementi:
- Apri DevTools.
- Apri il menu Comando premendo:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Inizia a digitare
Elements, seleziona Mostra elementi e premi Invio. DevTools visualizza il riquadro Elementi nel riquadro a scomparsa nella parte inferiore della finestra DevTools.