我正在尝试按照此处的教程进行操作。
我被困在DOM Breakpoints部分（靠近底部）。
我去了他们正在谈论的示例站点。我按下ctrl+ shift+i和导航到“内容”选项卡。在元素选项卡中，我找到了以下 html 部分：
<div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard">
</div>
现在我被困在试图找到上下文菜单：
在#profileCard 元素上调出上下文菜单并选择要中断的事件：子树修改、属性修改和节点删除
这是显示我在哪里的屏幕截图：
要在 Chrome 中设置断点，请像上面显示的那样打开检查器，然后单击顶部的脚本选项。这将允许您查看页面上正在使用的脚本并在该页面上插入断点。以及逐步完成它们和其他有用的调试选项。
以上是针对 javascript 的，要中断 dom 元素，请右键单击要中断的元素（在检查器内），它将调出上下文菜单，允许您中断子树修改和类似内容。
只是想补充一点，您只需右键单击元素面板中的元素，然后转到：
Break On...并选择Subtree modifications、Attributes modifications、 或Node removal
子树的修改子树修改时子元素的添加，移除或移动断点被触发。
属性修改当元素的属性（类、ID、名称）动态更改时，就会发生属性修改。
节点移除当有问题的节点从 DOM 中移除时，会触发节点移除修改。
在此处提供练习链接，享受 :) DOM 断点练习