How do I see what JS is changing style to my elements in Chrome dev tools or Firefox dev tools?

Question

My is a noob question as I am just learning JS so I am not good at it yet.

I am currently building a website ad added some JS snippets to do few actions. Now my footer has opacity: 0 and it doesn't come from CSS, therefore must come from some JS, but I cannot find it. How do I find what JS is modifying the style of a specific HTML element in the Chrome or Firefox DevTools?

Here is a screenshot to show the code:

I checked all my JS files but couldn't find anything that gives my footer opacity:0.

Answer 1

The Chrome DevTools allow you to stop at a specific change in the DOM structure.

To do that right click the element and choose Break on > attribute modifications from the context menu.

Then, once the style attribute is added (may require a page reload), the script execution will stop at the JavaScript line where the change occurred.

Answer 2

As far as I know you can't see which part of the code is changing the style.

Try setting breakpoints to find out where it sets it.

Maybe it isn't in your js files? It could be a script element in the document