How do I find which JavaScript is changing an element's style?

Question

I have an element that's getting styles applied via JavaScript. I'm not sure exactly where; is there a way to check Firebug to show where the "element.style" is actually coming from?

Answer 1

You can open the script view and search for ".style" in the searchbox.

Answer 2

If you're sure it's being set on the inline style and not as a consequence of a stylesheet rule, you can detect changes using the non-standard Mozilla watch() method:

document.body.style.watch('color', function(name, v0, v1) {
    alert(name+': '+v0+'->'+v1);
});
document.body.style.color= 'red';

You can put debugger; in the watcher function and look up the call stack in Firebug to see where the change was triggered.

Answer 3

You can also right click on the element in the HTML panel before the style is set and select break on Attribute Change. Script panel must be enabled.