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

Answer 1

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: