How to check which Javascript file inserts which code?

Question

How can I check which Javascript file inserted which code on my page?

I’m trying to find which JS file inserts this JSON-LD code snippet on this page.

Code starts like this:

[{"@context":"http://schema.org","@type":"Hotel","@id":"https://www.etstur.com/Granada-Luxury-Belek","name":"Granada Luxury Belek","image":"https://cdn.imageets.com/resize/a3e5181d58534ad7/230/230/files/images/hotelImages/TR/95763/l/Granada-Luxury-Belek-Genel-257544.jpg","priceRange":"En uygun fiyatlar ve 6 taksit avantajıyla","address":[{"@type":"PostalAddress","addressLocality":"Belek","addressCountry":"","streetAddress":"Belek","postalCode":""}],"telephone":"444 0 387","aggregateRating":{"@type":"AggregateRating","bestRating":10,"ratingValue":9.3,"worstRating":1,"reviewCount":""}}

For instance, Google’s structured data testing tool tells me which JS file inserted a particular JSON-LD code like this. https://i.sstatic.net/FpYer.png

in browser developer tools debugger or sources tab (depending on browser) - search for the code — Jaromanda X
– Jaromanda X, Commented Jan 17, 2020 at 12:52

CertainPerformance · Accepted Answer · 2020-01-17 13:00:18Z

2

For the general case, when debugging, one option is to add a DOMSubtreeModified listener at the beginning of pageload (which will run every time an element is added to the DOM, even while the page is loading), throw an error when the element you're curious about is found, and examine the stack trace to see what inserted it:

const callback = () => {
  if (document.querySelector('script[type="application/ld+json"]')) {
    window.removeEventListener('DOMSubtreeModified', callback);
    throw new Error();
  }
};
window.addEventListener('DOMSubtreeModified', callback);

This works, but synchronous mutation listeners are deprecated and should not be used in production code - they should only be used for debugging.

On your site, it looks to be inserted due to the GTM script:

answered Jan 17, 2020 at 13:00

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheOptimizer Over a year ago

@ CertainPerformance, thank you for your detailed reply. When I checked it using developer tools debugger it looks like this JS file inserts the code. imagessl.etstur.com/files/mvc/bacaa002/resources/js/list-view.js Am I looking to it wrong?

CertainPerformance Over a year ago

Are you sure you're adding the listener at the beginning of pageload? If you're adding the listener after, after the ld+json has been inserted, then the next node to be inserted will show the error, when in fact the script you're looking to identify has already run.

Collectives™ on Stack Overflow

How to check which Javascript file inserts which code?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related