如何在Chrome中设置DOM断点

Question

我正在尝试跟随这里的教程。

我卡在了DOM断点（靠近底部）的部分。

我去了他们所谈论的示例网站。 我按下了ctrl+shift+i，并导航到“元素”选项卡。 在元素选项卡中，我找到了以下HTML部分：

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

现在我卡在了寻找上下文菜单的地方：

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

这是一张屏幕截图，展示我的操作位置：

- Rusty Rob

Answer 1

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

以上是针对JavaScript的，在DOM元素上断点右键单击（在检查器内）您要在其上断点的元素，它会弹出上下文菜单，允许您在子树修改和类似内容上进行调试。

- Ryan

---

如何为仅在单击和拖动时存在的元素添加断点？右键单击或切换到检查器窗口会删除我要使用的元素。 - James

@James 现在 Chrome 浏览器有一个强制元素状态的选项。我不经常使用可拖动的元素，但你可能想研究一下这个选项。 - Ryan

Answer 2

我想补充一点，您可以在元素面板中右键单击一个元素，然后转到：

断点条件...选择子树修改、 属性修改或节点删除

- Hanna

---

当我点击一个元素并激活“属性修改”时，如果类属性被脚本修改，它不会中断。 - Legends

听起来你已经搞定了。 - Hanna

Answer 3

1. 在devTools上打开元素面板。
2. 检查或查找DOM元素。
3. 右键单击它并选择“断点...”

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

属性修改 当元素的属性（类、ID、名称）被动态更改时，会发生属性修改。

节点删除 当有关节点从DOM中删除时，将触发节点删除修改。

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

- Shawn Wu