Chrome Dev Tool traccia le modifiche DOM all'interazione

Question

Nella scheda dell'elemento dello strumento di sviluppo di Chrome, se facendo clic su un pulsante viene modificato un attributo (class="menu-item" ->class="menu-item active"), è possibile vedere un flash viola sull'elemento che indica la modifica. Questo è molto utile ma in un documento di grandi dimensioni devi espandere tutti gli elementi in profondità per vedere cosa sta succedendo.

C'è un modo per registrare/elencare tutte le modifiche del DOM quando si verifica un'interazione? Non specificamente in Chrome, ma qualsiasi altro strumento sarebbe fantastico. Consideralo come un diff tra interazione prima e dopo ma specifico per CSS.

Answer 1

Gli strumenti di sviluppo di Chrome offrono un'opzione per controllare gli eventi di clic, è possibile attivarlo facendo clic sulla scheda "fonte", dopo di che è possibile aprire il menu a discesa "Listener di eventi" e vedere gli eventi "Mouse", se apri quel menu a discesa puoi selezionare gli eventi dei clic.

È inoltre possibile controllare i cambiamenti degli attributi dalla scheda elementi facendo clic sull'elemento con il tasto destro del mouse e selezionando 'di interruzione di/attributo modifiche'