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
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.