Can I debugger.break() 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

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