Can I identify which .js script is altering a specific HTML element?

I will use the following website as an example:

https://www.webdesignrankings.com/resources/rqrwd/

In this website the value is calculated using a .js script stored in the HTML itself.

By looking at the source (after pressing F12) we can identify the element carrying the calculated value as being
<span id="added">[calculated value here]</span>
Since there is only one .js file in the source code itself, namely js/scripts.js I can infer that the formula is there.

But suppose there were multiple scripts, such as js/scripts1.js, js/scripts2.js and js/scripts3.js. Is there a way to know which of them is actually changing the value of the <span id="added">[calculated value here]</span> element?

I am well aware that usually these .js files jumble up the code so it’s not easily readable, but understanding the code is a separate issue. The idea here is to figure out which script carries the code I have to try and understand.

(Disclaimer: I’m not a HTML/CSS/JS guy, so some of the "technical" language may be wrong. This is for a Python web-scraping project. I hope I managed to get the idea across tho)

Edit from Nicolas’ comment: the actual usecase doesn’t have an id property in the element, as it does in the aforementined example

30 thoughts on “Can I identify which .js script is altering a specific HTML element?”

Leave a Comment