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 happening in HTML tab in Firebug, but can't find it in the code. The application is fairly big and I can't simply look through all of the code to find the place, besides, several third-party libraries are being used (jQuery is one of them).

So, my question is, is it possible to somehow catch this style being changed and get the trace?

Answer 1

Sounds like you really need a debugger. Firebug has one built in, otherwise you can give Venkman a try, which I find a bit more cumbersome but perhaps is more effective..

Good luck! :)

Answer 2

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!