我可以在 DOM 元素的所有更改上使用调试器中断吗？

Question

我真的很希望能够看到影响特定 DOM 元素的代码。

但我也非常希望不必查看所有 javascript 来搜索可能导致问题的引用/选择器。

有没有人有一种技术可以让浏览器调试器在对特定 DOM 元素进行任何更改时中断？我不介意它需要特定的浏览器或扩展程序才能工作。

Answer 1

这也是不需要在 Firebug 以及 Chrome 的开发工具（也许是其他工具，没有进一步检查）中编写任何脚本的情况下实现的。

在 Firebug 中：

1. 转到 HTML 选项卡
2. 右键单击​​要监视的元素
3. 选择“在属性更改时中断”、“在子添加或删除时中断”或“在元素删除时中断”

在 Chrome 开发者工具中

1. 转到元素选项卡
2. 右键单击您要监视的元素
3. 选择“中断...”，然后选择“子树修改”或“属性修改”或“节点删除”

我实际上在尝试接受的999答案后发现了这一点，但是给定的代码对我不起作用。此外，Chrome 能够监视任何 DOM 子树上的事件，这似乎非常好。

Answer 2

注意：以下事件在提出问题时非常有用，但已不再是最新的。推荐的替代方案是 MutationObservers，但它们仍处于成熟阶段

MDN 上的 MutationObserver< /a>

---

试试这个（在 Firefox 中，安装了 Firebug）：

function breakOnChange(el) {

    if (!el.addEventListener) return;

    el.addEventListener('DOMAttrModified',
         function(DOMAttrModifiedEvent){debugger}, true);

    el.addEventListener('DOMNodeInserted',
         function(DOMNodeInsertedEvent){debugger}, true);

    el.addEventListener('DOMNodeRemoved',
         function(DOMNodeRemovedEvent){debugger}, true);

}

// Usage:
breakOnChange(someDomNode);