Chrome Dev Tool track DOM changes on interaction

Question

In Chrome Developer Tool Element's tab, if by clicking on a button an attribute changes (class="menu-item" -> class="menu-item active"), you can see a purple flash on the element indicating the change. This is very helpful but in a large document you have to expand all the elements down deep to see what's happening.

Is there any way you can record/list all the DOM changes when an interaction occurs? Not specifically in Chrome but any other tool would be great. Think of it as a diff between before and after interaction but specific to CSS.

Answer 1

There is a chrome extension: DOMListener Where you can start recording DOM changes when you are expecting a change, when the change happens too fast for you to notice without help of a tool. You can filter the changes you want to track by 4 categories:

• text changed
• attribute changed
• node added
• node removed

And you will get the changes with target and details

https://chrome.google.com/webstore/detail/domlistener/jlfdgnlpibogjanomigieemaembjeolj