Chrome 开发工具在交互时跟踪 DOM 变化答案

【问题标题】：Chrome Dev Tool track DOM changes on interactionChrome 开发工具在交互时跟踪 DOM 变化
【发布时间】：2015-07-27 19:38:39
【问题描述】：

在 Chrome 开发者工具元素的选项卡中，如果通过单击按钮更改了属性 (class="menu-item" -> class="menu-item active")，您会看到元素上的紫色闪烁指示更改。这非常有用，但在大型文档中，您必须深入展开所有元素才能看到发生了什么。

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

【问题讨论】：

【解决方案1】：

有一个chrome扩展：DOMListener 当您期望更改时，您可以在哪里开始记录 DOM 更改，当更改发生得太快以至于您在没有工具帮助的情况下注意到时。您可以按 4 个类别过滤要跟踪的更改：

你会得到目标和细节的变化

【讨论】：

【解决方案2】：

右键单击 Inspector 中的元素并选择 Breakpoint 并选择要监视的更改类型。

那么下次元素受到影响时，页面就会停止。带有“暂停执行”消息。您可以在该点检查元素的冻结状态。然后单击暂停执行消息上的蓝色三角形按钮，它将继续执行，直到该元素下一次更改，此时您可以再次检查它。

【讨论】：