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

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 2

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.

Answer 3

On request from this question:

If you have firefox you can check the "Break on Attribute Change" option in the HTML tab. Just right click the target element and the menu will pop up. After that, resize the window and it will break in the script line where the attribute is changed.

Answer 4

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

Answer 5

I think this is what is default tool for the job, although it has limited debugging capabilities: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Also, make sure Ad Blocker is not responsible.