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

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.

The Chrome DevTools as well as the Firefox 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 (Chrome) or Break on... > Attribute Modification (Firefox) from the context menu.

An indicator on the left side shows that the Break on... feature is active for the element.

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.

Note that the Firefox DevTools currently (as of Firefox 128) don't keep track of the elements when reloading the page. And the Chrome DevTools also sometimes have issues with that. So, if the change happens during page load, it may help to first stop the script execution at the load event (note that this requires an event listener to be set on the load event; in the Chrome DevTools there's even an event listener for the Script First Statement, which may be the preferred option).

This can be enabled in the Event Listener Breakpoints side panel of the Sources/Debugger panel.

When you then reload the page and the script stops, set the Break on... option and continue the script execution.

This should allow you to handle the case when the attribute is changed right after the page is loaded.