如何在chrome中设置DOM断点
我正在试着按照这里的教程。
我困在DOM Breakpoints （靠近底部）的部分。
我去了他们正在谈论的示例网站 。 我按下Ctrl + Shift + 我和导航到“元素”选项卡。 在元素选项卡中，我find了以下html部分：
<div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard"> </div> 现在我卡住试图find上下文菜单：
调出#profileCard元素的上下文菜单，然后select要分解的事件：子树修改，属性修改和节点删除
以下是显示我的位置的截图：
要在Chrome中设置中断点，请像上面显示的那样调出检查器，然后点击顶部的脚本选项。 这将允许您查看页面上使用的脚本，并在该页面上插入断点。 以及通过他们和其他有用的debugging选项。
以上是对于JavaScript，打破了DOM元素右键单击你想打破的元素（内部的检查），它会出现上下文菜单，让你打破子树的修改和类似的东西。
只是想添加一下，你可以简单地右键单击元素面板中的一个元素，然后转到：
Break On...并select子Subtree modifications ， Attributes modifications或Node removal
- 在devTools上打开元素面板。
- 检查或找出DOM元素。
- 右键点击它并select中断…
子树修改当添加，移除或移动子元素时，会触发子树修改断点。
属性修改当元素（class，id，name）的属性dynamic改变时，会发生属性修改。
节点删除当从DOM中删除有问题的节点时，会触发节点删除修改。
在这里提供练习链接，享受:) DOM断点练习
