DOM attribute change debugging

Question

Somehow somewhere in my code one of the elements on the page gets a style attribute which I don\'t expect it to get. Namely, it gets style=\"position:fixed\". I can see this

Answer 1

Well, after a couple of hours of googling and experimenting, it seems that the best one can do it setup a MutationEvent handler (Firefox supports them) like this:

var node_modified = function(evt) {
    if(evt.attrName == 'style') {
        alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue);
    }
}
var test_close = document.getElementById('test_close');
test_close.addEventListener('DOMAttrModified', node_modified, false);

An then set up some kind of logging throughout your code and see when this event gets triggered. Unfortunately, you can't just set up a breakpoint in the mutation event handler and see the stack trace, because event handler's stack trace has no information about the place in the code, where the event got triggered. Kind of logical, but I think that with some hacking this feature can be implemented in Firebug.

Thank you for your time!