html - Chrome开发工具跟踪交互时DOM的变化

在Chrome开发者工具元素的标签中，如果通过单击按钮更改属性(class="menu-item"-> class="menu-item active")，则您会在该元素上看到紫色闪烁，指示更改。这非常有帮助，但是在大型文档中，您必须将所有元素向下扩展，以查看正在发生的情况。

发生交互时，有什么方法可以记录/列出所有DOM更改？并非专门在Chrome中使用，但其他任何工具都很好。将其视为交互之前和之后之间的diff，但特定于CSS。

最佳答案

有一个Chrome扩展程序:DOMListener
当您期望更改时，您可以在其中开始记录DOM更改，当更改发生得太快而您无需借助工具就无法注意到时。
您可以按4个类别过滤要跟踪的更改:

文字已更改

属性已更改

节点已添加

节点已删除

您将获得目标和详细信息的更改

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

关于html - Chrome开发工具跟踪交互时DOM的变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30266963/