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

In Google Chrome, right click on an element in the page and select "Inspect Element." The Developer Tools window or pane will open with that element selected in the source view. You can then right click the selected tag and choose "Break on Attributes Modifications."

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!