如何在 chrome 中设置 DOM 断点答案

【问题标题】：how to set DOM Breakpoints in chrome如何在 chrome 中设置 DOM 断点
【发布时间】：2012-06-05 07:34:39
【问题描述】：

我正在尝试遵循教程here。

我卡在 DOM Breakpoints 部分（靠近底部）。

我去了他们正在谈论的example site。我按下 ctrl+shift+i 并导航到“元素”选项卡。在元素选项卡中，我找到了以下 html 部分：

<div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard">
</div>

现在我一直在寻找上下文菜单：

在#profileCard 元素上调出上下文菜单并选择要中断的事件：子树修改、属性修改和删除节点

这是显示我所在位置的屏幕截图：

【问题讨论】：

【解决方案1】：

要在 Chrome 中设置断点，请像上面显示的那样打开检查器，然后单击顶部的脚本选项。这将允许您查看页面上使用的脚本并在该页面上插入断点。以及单步调试它们和其他有用的调试选项。

以上内容适用于 javascript，要中断 dom 元素，请右键单击要中断的元素（在检查器内部），它会弹出上下文菜单，允许您中断子树修改和类似的内容那个。

【讨论】：

【解决方案2】：

只是想补充一点，您只需右键单击元素面板中的元素并转到：

Break On... 并选择 Subtree modifications、Attributes modifications 或 Node removal

【讨论】：

【解决方案3】：

子树修改子树修改断点在添加、删除或移动子元素时触发。

属性修改属性修改发生在元素的属性（类、id、名称）动态改变时。

节点移除当相关节点从 DOM 中移除时，会触发节点移除修改。

在这里提供一个练习链接，享受:) DOM Breakpoints Exercise‎

【讨论】：