javascript - 如何在 chrome 中设置 DOM 断点

Question

我正在努力学习教程 here .

我卡在 DOM 断点 部分(靠近底部)。

我去了example site他们在谈论。我按下 ctrl+shift+i 并导航到“元素”选项卡。在元素选项卡中，我找到了以下 html 部分:

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

现在我无法找到上下文菜单:

Bring up a context menu on the #profileCard element and select the events you want to break on: subtree modifications, attributes modifications, and the node removal

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

Answer 1

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

上面是针对 javascript 的，要在 dom 元素上打断，请右键单击要打断的元素(在检查器内部)，它会弹出上下文菜单，允许您在子树修改和类似内容上打断那个。