Utilizza il riquadro Elementi per ispezionare e modificare gli elementi DOM.
Panoramica
Il riquadro Elementi fornisce un'interfaccia solida per ispezionare 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 e esegui il debug delle regole CSS applicate a un elemento da tutti gli stili.
- 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 Box.
- Accedi alle opzioni di modifica del contenitore con i badge disponibili nell'albero DOM.
Elaborato: elenca le proprietà risolte applicate a un elemento durante il rendering da parte di Chrome.
Layout: contiene opzioni per modificare gli overlay griglia e flexbox.
Listener di eventi: elenca tutti i listener di eventi e i relativi attributi. Ti consente di trovare l'origine dei listener di eventi e di filtrare in base ai listener passivi o bloccanti.
Punti di interruzione DOM: elenca i punti di interruzione delle modifiche del DOM aggiunti dal riquadro Elementi e ti consente di attivarli, disattivarli, rimuoverli o mostrarli.
Proprietà: seleziona un nodo DOM per ispezionare e ordinare le proprietà proprie e ereditate dell'oggetto.
Accessibilità: elenca gli elementi con etichette ARIA e le relative proprietà. Ti consente di attivare/disattivare e ispezionare un albero di accessibilità (sperimentale).
Apri il riquadro Elementi
Per impostazione predefinita, quando apri DevTools si apre il riquadro Elementi. Puoi anche ispezionare 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 laterale nella parte inferiore della finestra DevTools.