在Chrome开发者工具元素的标签页中，如果点击按钮属性发生变化（class="menu-item" - ＆gt; class="menu-item active"），您可以在元素上看到紫色闪烁，表示更改。这非常有用，但在大型文档中，您必须深入扩展所有元素以查看发生的情况。
有没有什么方法可以在发生交互时记录/列出所有DOM更改？不是专门用于Chrome，但任何其他工具都会很棒。在交互之前和之后将其视为diff，但特定于CSS。
答案 0 :(得分：1)
有一个Chrome扩展程序：DOMListener 当您期望更改时，您可以在其中开始记录DOM更改，当更改发生得太快而您无需借助工具即可注意到。 您可以按4个类别过滤要跟踪的更改：
您将获得包含目标和详细信息的更改
https://chrome.google.com/webstore/detail/domlistener/jlfdgnlpibogjanomigieemaembjeolj
答案 1 :(得分：1)
右键单击Inspector中的元素，然后选择Breakpoint，然后选择要监视的更改类型。
然后，下次该元素受到影响时，页面将停止。带有“已暂停执行”消息。您可以在此时检查元素的冻结状态。然后单击“暂停的执行”消息上的蓝色三角形按钮，它将继续直到下一次元素更改时，您可以再次对其进行检查。