Il Visualizzatore pagina mostra la struttura DOM completa come sovrapposizione visiva ad albero direttamente sulla pagina.
I DevTools del browser mostrano il DOM come albero testuale in un pannello laterale. Il Visualizzatore pagina proietta la struttura DOM direttamente sulla pagina con badge colorati per ogni elemento.
Ogni elemento visibile riceve un badge colorato con il nome del tag HTML.
Ogni tipo di elemento ha un colore di sfondo distinto per il badge.
Passa il cursore su qualsiasi badge per evidenziare l'elemento corrispondente con sovrapposizione semitrasparente.
Gli elementi profondamente annidati sono più indentati, rendendo le relazioni di annidamento visibili.
Le sovrapposizioni non influenzano layout, scorrimento o comportamento JavaScript della pagina.
Clicca sul badge di qualsiasi contenitore per comprimere i suoi figli.
Arrivato su una pagina complessa? Il Visualizzatore mostra l'intera gerarchia DOM a colpo d'occhio.
L'annidamento eccessivo di div rende il CSS più difficile. Se vedi 6+ livelli di badge, il markup può essere semplificato.
Cerca badge header, nav, main, article, section e footer.
Visita siti ben costruiti e attiva il Visualizzatore per vedere come strutturano l'HTML.
Usa il Visualizzatore prima per identificare gli elementi, poi passa a strumenti più specifici.
Apri il dock di DevSuite Pro e clicca sull'icona Visualizzatore pagina.
Badge colorati appaiono su ogni elemento mostrando il nome del tag.
Passa il cursore su qualsiasi badge per evidenziare l'elemento corrispondente.
Clicca su un badge contenitore per nascondere i badge dei figli.
Clicca sull'icona nel dock per rimuovere tutte le sovrapposizioni.
Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.
