如何在chrome中设置DOM断点

时间：2012-05-31 03:01:34

标签： javascript debugging google-chrome google-chrome-devtools

我正在尝试按照教程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>

现在我一直在努力寻找上下文菜单：

  

在#profileCard元素上打开上下文菜单，然后选择   要打破的事件：子树修改，属性   修改和节点删除

这是一个截图，显示我的位置：

ss

3 个答案:

答案 0 :(得分：40)

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

以上是针对javascript，打破dom元素右键单击要打破的元素（在检查器内部），它将打开上下文菜单，允许您打破子树修改和类似的东西这一点。

答案 1 :(得分：25)

只是想补充一点，您只需右键单击元素面板中的元素，然后转到：

Break On...并选择Subtree modifications，Attributes modifications或Node removal

enter image description here

答案 2 :(得分：9)

  1. 在devTools上打开元素面板。
  2. 检查或找出DOM元素。
  3. 右键单击它并选择中断...
    4.   

    子树修改 添加，删除或移动子元素时会触发子树修改断点。

         

    属性修改 当动态更改元素（class，id，name）的属性时，会发生属性修改。

         

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

    在这里提供锻炼链接，享受:) DOM Breakpoints Exercise‎

相关问题
最新问题