Is there a way for me to determine which .js script is modifying a particular HTML element?

Let's take a look at a specific website as an example:

This particular website calculates value using a .js script embedded in the HTML itself.

Upon inspecting the source code by pressing F12, we can locate the element containing the calculated value identified as:
[calculated value here]


If there were multiple scripts like scripts1.js, scripts2.js, and scripts3.js present within the source code, how could we determine which one is responsible for changing the value of the [calculated value here] element?

It is common for .js files to obfuscate the code making it hard to read. However, the main objective here is to pinpoint exactly which script holds the code that needs to be understood.

(Disclaimer: I may not be well-versed in HTML/CSS/JS terminology as this pertains to a Python web scraping project. Hopefully, the overall concept has been conveyed successfully)

Edit based on Nicolas' comment: The actual scenario does not involve an id property in the element, unlike the previous example mentioned

javascripthtmljquerycssreverse-engineering

Answer №1

If you're looking to investigate the bookmark icon on this page, try checking out 

line 2535 of the jquery.min.js:formatted
. Utilizing Chrome's developer tools may provide the solution you seek. By setting a breakpoint to activate whenever there are modifications, you can easily track down any changes.

For example, to examine the bookmark icon further, simply right-click and inspect the element. In my own exploration, I found a path element nested within an svg that was highlighted in the inspector. After right-clicking on the button element, I selected "Break on"->"subtree modifications".

This setup now triggers a breakpoint whenever there is a change in a child of the button. Clicking the bookmark button demonstrates this functionality, with the browser pinpointing exactly where the code updated the image.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing the 'bootstrap tour' feature in a Ruby on Rails application

I have integrated bootstrap-tour.min.css and bootstrap-tour.min.js into my project. <script type="text/javascript" src='bootstrap-tour.min.js'></script> <link rel="stylesheet" type="text/css" href="bootstrap-tour.min.css"> Her ...

javascriptcssruby-on-railsrubytwitter-bootstrap

Off Canvas left navigation menu using Bootstrap

I am working on creating a responsive layout for a webpage using Bootstrap. On larger displays, such as desktop resolutions, I want the webpage to show the header and left navigation as normal. However, when the site is resized to that of tablets or mobile ...

javascriptjqueryhtmltwitter-bootstrap-3

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

javascriptphpjqueryhtmlcss

Discover the process of executing two functions simultaneously by interacting with a VRbutton through React360

As a newcomer to React, I am still learning the ropes and facing a challenge with using two functions simultaneously with Vrbutton (or any button) on onClick event. I have attempted various methods (referenced in my commented out code below) to make multi ...

javascriptreactjsreact-360

Vue Subroutes within nested components do not automatically load

My application features a sidebar that I want to utilize to load the Patient view by default when accessing patient/:id. This should also trigger the loading of the PatientDashboard sub-view. Within the Patient view component, there is a router-view that ...

javascriptvue.jsvue-routervuejs3

Persist the data retrieved from an asynchronous function in the memory

I am faced with a challenge in Node.js where I need to store an object in memory. This particular object is created asynchronously from an API call. The issue at hand is that previously, this object was synchronous and many parts of the application were de ...

javascriptnode.js

Enhancing jQuery Rating Plugin

Currently, I am working on customizing the jQuery Bar Rating System Plugin. You can view an example of the plugin by visiting this link: . The rating system on my end will resemble Example D. Rather than having the plugin based on user input, my goal is to ...

javascriptjqueryhtmlxslt

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

javascripthtmlcssjsonslicknav

Sort firebase information by chronological order based on timestamp

I'm currently working on sorting track IDs from firebase based on their timestamp (createdAt). The function is functioning correctly, but the ordering doesn't seem to work as expected. I'm not sure where the issue lies. Any assistance or sug ...

javascriptreactjsfirebase-realtime-database

Pressing the "Ctrl" key, click on the link that will display a

I received a link that utilizes AJAX to render a partial view. Below is the code for the link: <a href="#" onclick="LoadChildCategories(@i.CategoryId, @i.IsTrading.ToString().ToLower())">@i.Name</a> Here is the code for the LoadChildCa ...

javascriptc#jqueryajaxasp.net-mvc

Issue encountered: Next.js version 14, Tesseract.js Error: Module not found .../.next/worker-script/node/index.js'

While working with nextjs 14 and trying to extract text from an image using the tesseract.js node module, I encountered an error where the module was not found. The specific error message I received is as follows: Error: Cannot find module '...(projec ...

javascriptnode.jsnext.jsnode-modulestesseract.js

Commit the incorrect file name with the first letter capitalized

There seems to be an issue with the git not recognizing the correct filename casing. I have a file named User.js in my workspace, but when checking the git status, it displays user.js instead. Despite repeatedly changing and committing as User.js, the gi ...

javascriptnode.jsgit

What is the best way to discover the possible parameters that a dynamic link is able to accept?

Is there a way to discover all possible arguments for links that use the "&" operator to add multiple parameters, like the example below? https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&[email protected] I am searching for something akin t ...

htmlhyperlinkdynamic-links

Troubleshooting my PHP MSQL Update function in CRUD operations

Having trouble with the Update function when trying to implement CRUD on my website. Can anyone assist me? I can successfully Create, Read and Delete, but updating is giving me issues especially for Admin users. Below is the code snippet: <?php // Inc ...

phphtmlsql

I am having trouble with searching for places using the Google API in my Node

Recently, I've been working on integrating the Google Maps API places feature into my project. Thankfully, I came across an npm module that simplifies the process of connecting it to node. Check out the npm module here! After downloading the module ...

javascriptnode.jsgoogle-mapsgoogle-places-api

The issue of isotope overlapping occurs when trying to retrieve items using ajax calls

I've been developing a website and I'm utilizing fullpage.js with two distinct sections. In the second section, I have implemented a link that opens a gallery using ajax when clicked on a specific gallery link. However, after the ajax call, there ...

jqueryajaxjquery-isotopejquery-masonryfullpage.js

Is it possible for the header's background color to smoothly transition as the user scrolls down the page?

Hey there! I wanted to share my website with you: click here I'm looking for some advice on how to create a cool effect where the background color of my header (light grey) fades from 0 opacity to 100% as you scroll down the page. Ideally, I'd l ...

jquerycolorsbackgroundscrollopacity

AngularJS deferred rendering (not deferred loading views)

Imagine having over 3000 items to display within a fixed-height div using an ng-repeat and setting overflow: auto. This would result in only a portion of the items being visible with the rest accessible via scrollbar. It's anticipated that simply run ...

javascriptangularjs

Testing Async operations in the browser with Mocha and Chai

I'm having trouble running async tests with mocha. Below is the snippet of my code: describe('Brightcove Wrapper',function(){ describe("#init()", function() { it("Should inject the brightcove javascript", function(callback){ ...

javascriptunit-testingbddmocha.jschai

Image flipping effect malfunctioning in Safari and Internet Explorer

My image flipping effect is not functioning properly in Safari and IE browsers. Here is the code I am using: .flipcard { position: relative; width: 220px; height: 220px; perspective: 500px; margin: auto; text-align: center; } .flipcard.v:hove ...

javascriptjqueryhtmlcss