Chrome Dev Tool跟踪DOM在交互时的变化

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

Answer 2

Right click the element in Inspector and choose Breakpoint and choose the type of change you want to monitor.

Then next time the element is affected, the page will stop. with a "Paused execution" message. You can examine the frozen state of the element at that point. Then click the blue triangle button on the Paused Execution message and it will resume until the next time that element changes, at which point you can examine it again.