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

Question

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

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

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

Answer 1

如果没有在Firebug中编写任何脚本以及Chrome的开发人员工具（也许是其他人，没有进一步检查），这也是可行的。

在Firebug中：

1. 转到HTML标签
2. 右键单击要监控的元素
3. 选择“Break On Attribute Change”或“Break On Child Addition or Removal”或“Break On Element Removal”

在Chrome开发者工具中

1. 转到“元素”标签
2. 右键单击要监控的元素
3. 选择“Break On ...”，然后选择“Subtree Modification”，或“Attributes Modification”或“Node Removal”

我在尝试接受999的答案后确实发现了这一点，但是代码对我来说并不适用。此外，Chrome监控任何DOM子树上的事件的可能性似乎非常好。

Answer 2

注意：当提出问题时，下面的事件很棒，但不再是最新的。推荐的替代品是MutationObservers，但那些仍在成熟

MutationObserver on MDN

---

试试这个（在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);