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

我正在尝试按照本教程进行操作。

我被困在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元素上显示一个上下文菜单,然后选择 您想破坏的事件:子树修改,属性 修改和节点删除

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

ss

3个解决方案
40 votes

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

上面是针对javascript的,要中断dom元素,请右键单击要中断的元素(在检查器内部),它将弹出上下文菜单,使您可以中断子树修改和类似的操作。

Ryan answered 2020-08-12T08:46:58Z
25 votes

只需添加一下即可,您只需在“元素”面板中右键单击一个元素,然后转到:

Break On...,然后选择Subtree modificationsAttributes modificationsNode removal

enter image description here

Hanna answered 2020-08-12T08:47:22Z
9 votes
  1. 在devTools上打开元素面板。
  2. 检查或找出DOM元素。
  3. 右键单击它,然后选择“中断...”

子树修改当添加,删除或移动子元素时,将触发子树修改断点。

属性修改当元素的属性(类,id,名称)动态更改时,就会发生属性修改。

节点删除当将有关节点从DOM中删除时,将触发节点删除修改。

在这里提供一个练习链接,享受:)DOM断点练习

Shawn Wu answered 2020-08-12T08:48:09Z
translate from https://stackoverflow.com:/questions/10826916/how-to-set-dom-breakpoints-in-chrome