Chrome Dev Tool tracks DOM changes when interacting

Question

In the tab "Chrome Developer Tool Element", if the button changes the attribute ( class="menu-item" → class="menu-item active" ), you can see a purple flash on the element indicating the change. This is very useful, but in a large document, you need to expand all the elements to see what happens.

Is there a way to write / list all DOM changes in the interaction? 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 expect changes, when changes happen too quickly, so you can notice them without the help of a tool. You can filter the changes you want to track into 4 categories:

• text changed
• attribute changed
• node added
• node deleted

And you will get changes with purpose and details

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

Answer 2

Right-click the item in the Inspector, select Breakpoint, and select the type of change you want to track.

Then the next time the item is touched, the page will stop. with the message "Suspended execution." You can check the status of the item at this point. Then press the blue triangle button in the "Suspended Execution" message and it will resume until the next change to this item, after which you can view it again.

Answer 3

Chrome Dev tools give you the ability to check click events, you can activate them by clicking the "source" tab, after which you can open the "Event Listener Breakpoints" drop-down list and see the "Mouse" events, if you open this drop-down menu, you can select click events.

You can also check attribute changes in the Elements tab by right-clicking an element and selecting Make Attributes Changes / Changes