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

javascript jquery css debugging firebug

19,745

Solution 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.

Solution 2

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.

Solution 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.

Solution 4

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.

View more solutions

19,745

Author by

Admin

Updated on June 02, 2022

Comments

Admin almost 2 years

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?
Brock Adams almost 14 years

That will only work in a very limited number of cases -- especially with jQuery in use.
Felix Kling almost 14 years

@Brock Adams: That's true, but one can also search for .css ;)
user1794295 almost 10 years

Can someone please tell us what we do/where we put the above code?
Coty Embry almost 8 years

@user1794295 in jQuery's $(document).ready(function() { /* your code goes here */ }); or something similar
cawecoy over 5 years

I can't see the "Break On Attribute Change" option.
cawecoy over 5 years

I can't see the "Break On Attribute Change" option.
Barmar over 5 years

That menu is completely different in current FireFox, and doesn't have any of the "Break On" actions.
outis about 5 years

Removed as of FF 58.
JohnWrensby almost 4 years

Yes, pause Ad Blocker, if style getting changed to display: 'none'. Issue I had was img was not showing and the filename/url contained 'advert'.