Javascript 如何在chrome中设置DOM断点

我正在努力学习教程

我被底部附近的DOM断点卡住了

我去了他们正在谈论的地方。我按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元素，请右键单击要打断的检查器内部的元素，它将弹出上下文菜单，允许您打断子树修改之类的内容。

只需添加，您只需右键单击元素面板中的元素，然后转到：

打断。。。并选择“子树修改”、“属性修改”或“节点删除”

打开devTools上的元素面板。 检查或查找DOM元素。 右键单击它并选择“断开…”。。。 子树修改添加、删除或移动子元素时会触发子树修改断点

属性修改当元素类、id、名称的属性动态更改时，会发生属性修改

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

在此处提供运动链接，享受：

---

如何将断点添加到仅在单击和拖动时出现的元素？右键单击或用Tab键单击Inspector窗口将删除我试图使用的元素。@James chrome现在有一个强制元素状态的选项。我不经常使用DragTables，但您可能想了解一下。当我单击一个元素并激活属性修改时，当脚本修改类属性时，它不会中断