如何在 Chrome 中设置 DOM 断点

我正在尝试按照教程进行操作here https://developers.google.com/chrome-developer-tools/docs/elements.

我被困在该部分DOM 断点（靠近底部）。

I went to the example site https://github.com/google/closure-library/blob/master/closure/goog/demos/hovercard.html they are talking about. I pressed ctrl+shift+i and navigated to "elements" tab. In the elements tab I found the following html section:

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

现在我被困在试图找到上下文菜单：

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

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

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

上面是针对 javascript 的，要中断 dom 元素，请右键单击要中断的元素（检查器内部），它将显示上下文菜单，允许您中断子树修改和类似的内容。