CODEWITHSUNDEEP
javascriptgoogle-chrome-devtoolsfirefox-developer-tools
Jason
Jason

Reputation: 175

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: https://imgur.com/iYIeSPO

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

Upvotes: 16

Views: 5622

Answers (3)

Sebastian Zartner
Sebastian Zartner

Reputation: 20105

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.

Break on attribute modifications in Chrome DevTools

Break on Attribute Modification in Firefox DevTools

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.

load event listener breakpoint enabled in Chrome DevTools

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.

Upvotes: 23

CodeIt
CodeIt

Reputation: 3618

To prevent that from happening, you can add a small <script> tag to the end of your .html file.

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <footer class="footer" style="opacity: 0;">My footer </footer>
</body>

</html>
<script>
  /* Place this script tag at the end of your document */
  document.getElementsByClassName("footer")[0].style.opacity = 1; //sets opacity of footer element to 1
</script>

If you really want to check what is changing your style attribute, you can check these guides from chrome and firefox on how to set breakpoints in devtools.

Hope this helps!

Upvotes: 1

kess
kess

Reputation: 1309

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

Upvotes: 1

Related Questions