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!

Answer 2

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 3

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 4

In Firebug's html inspector you can right click on a node and there is an option to interrupt on attribute change.

Breakpoints persist through page reloads and you can also browse the call stack.