在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,但那些仍在成熟

MDN上的MutationObserver

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