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

by

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

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

  1. The bookmark icon for this question is altered by line 2535 of jquery.min.js:formatted. The developer tools in Chrome already have what you need. You can ask for a break-point to be triggered whenever there’s a modification.

    In the case of the bookmark icon here, right-click it and inspect-element.
    When I did it, a path element inside an svg is highlighted in the element inspector.
    I right-clicked the button element in the inspector, then selected “Break on”->”subtree modifications”

    Now I expect a breakpoint to be triggered whenever a child of the button changes, so I click the bookmark button and voila! The breakpoint is triggered and the browser tells me which part of the code updated the image.

    Reply

Leave a Comment