Utilizza il riquadro Elementi per esaminare e modificare gli elementi DOM.
Panoramica
Il riquadro Elementi offre un'interfaccia efficace per ispezionare e manipolare il DOM. Puoi utilizzare l'albero DOM, simile a un documento HTML, per selezionare nodi DOM specifici e modificarli con altri strumenti.
Il riquadro Elementi contiene anche le seguenti schede che contengono gli strumenti pertinenti:
Stili:
- Visualizzazione ed esecuzione di debug delle regole CSS applicate a un elemento da tutti i fogli di stile.
- Trova qualsiasi CSS non valido, sostituito, non attivo o di altro tipo che non funziona come previsto.
- Modificare gli elementi aggiungendo una dichiarazione, applicando una classe e interagendo con il modello Box.
- Accedi alle opzioni di modifica del contenitore con i badge che si trovano nell'albero DOM.
Calcolata: elenca le proprietà risolte applicate a un elemento quando ne viene eseguito il rendering da Chrome.
Layout: contiene opzioni per modificare gli overlay grid 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 del DOM aggiunti dal riquadro Elementi e consente di attivarli, disattivarli, rimuoverli o visualizzarli.
Proprietà: seleziona un nodo DOM per esaminare e ordinare le proprietà proprie ed ereditate dell'oggetto.
Accessibilità: elenca gli elementi che hanno etichette ARIA e le relative proprietà. Consente di attivare/disattivare e ispezionare un albero dell'accessibilità (sperimentale).
Apri il riquadro Elementi
Per impostazione predefinita, quando apri DevTools si apre il riquadro Elementi. Puoi anche controllare 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: Comando+Maiusc+P
- Windows, Linux, ChromeOS: Ctrl+Maiusc+P
- Inizia a digitare
Elements, seleziona Mostra elementi e premi Invio. DevTools mostra il riquadro Elementi nel riquadro a scomparsa nella parte inferiore della finestra DevTools.