Utilizza il riquadro Elementi per ispezionare e modificare gli elementi DOM.
Panoramica
Il riquadro Elementi offre un'interfaccia affidabile per l'ispezione e la manipolazione del DOM. Puoi utilizzare la struttura DOM, simile a un documento HTML, per selezionare nodi DOM specifici e modificarli con altri strumenti.
Il riquadro Elementi contiene anche le seguenti schede contenenti strumenti pertinenti:
Stili:
- Visualizzare ed eseguire il debug delle regole CSS applicate a un elemento da tutti i fogli di stile.
- Individua 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.
- Consente di accedere alle opzioni di modifica del contenitore con i badge nell'albero DOM.
Calcolato: elenca le proprietà risolte applicate a un elemento durante il rendering da Chrome.
Layout: contiene le 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 la fonte dei listener di eventi e di filtrare quelli 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 visualizzarli.
Proprietà: seleziona un nodo DOM per ispezionare e ordinare le proprietà proprie ed ereditate dell'oggetto.
Accessibilità: elenca gli elementi che hanno etichette ARIA e le relative proprietà. Consente di attivare e controllare 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 visualizza il riquadro Elementi nel riquadro a scomparsa nella parte inferiore della finestra di DevTools.