Can I break with debugger on all changes to a DOM element?

Question

I would really love to be able to see the code that is affecting a specific DOM element.

But I also would really love not to have to look through all my javascript searching for references/selectors that might be causing the issue.

Does anyone have a technique for causing a browser debugger to break on any changes to a specific DOM element? I don't mind it requiring a specific browser or extension to work.

Answer 1

This is also doable without writing any script in Firebug as well as in Chrome's developer tools (maybe others, did not inspect further).

In Firebug:

1. Go to HTML tab
2. Right-click an element you'd like to monitor
3. Choose "Break On Attribute Change", or "Break On Child Addition Or Removal", or "Break On Element Removal"

In Chrome Developer Tools

1. Go to Elements tab
2. Right-click an element you'd like to monitor
3. Select "Break On ...", then choose "Subtree Modification", or "Attributes Modification", or "Node Removal"

I actually found this out after trying accepted answer of 999, however given code did not work for me. Additionally, Chrome's possibility to monitor events on any DOM subtree seems really nice.

Answer 2

Note: The events below were great when the question was asked, but are no longer current. The recommended alternative is MutationObservers, but those are still maturing

MutationObserver on MDN

---

Try this (in Firefox, with Firebug installed):

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);