在Chrome Developer Tool元素的选项卡中，如果单击某个按钮某个属性发生更改(class="menu-item"->class="menu-item active"(，则可以在元素上看到一个指示更改的紫色闪光灯。这很有帮助，但在一个大型文档中，您必须深入展开所有元素，才能看到发生了什么。
有没有什么方法可以在交互发生时记录/列出所有DOM更改？不是专门在Chrome中，但任何其他工具都会很棒。可以将其视为交互前后的diff，但它是CSS特有的。
右键单击Inspector中的元素，然后选择Breakpoint并选择要监视的更改类型。
然后，下次元素受到影响时，页面将停止。并显示"暂停执行"消息。您可以在该点检查图元的冻结状态。然后单击Paused Execution消息上的蓝色三角形按钮，它将继续，直到下一次元素更改时，您可以再次检查它。
有一个chrome扩展：DOMListener在这里，当您期望更改时，当更改发生得太快以至于您在没有工具帮助的情况下无法注意到时，您可以开始记录DOM更改。您可以按4个类别筛选要跟踪的更改：
- 文本已更改
- 属性已更改
- 已添加节点
- 节点已删除
你会得到目标和细节的变化
https://chrome.google.com/webstore/detail/domlistener/jlfdgnlpibogjanomigieemaembjeolj