How can I identify where JavaScript files are being called from in Chrome DevTools?

Question

In Chrome Developers Tools, the Sources/Network tabs indicate a site has over 100 external scripts loading.

I'm trying to reduce this, however it's very hard to trace where and how each one is being loaded. Only a handful of them are coming from traditional <script> tags in the main src. Others may be dynamically inserted, in iframes etc.

Is there any method or tool that would allow me to easily track where each script is loaded?

Answer 1

If I understand your question, there is a column in the Network tab that is called "Initiator" which shows where or what is calling the JS script. This includes ones that are being dynamically called and are in iFrames. Using this you can see where js files are coming from that aren't strictly on the page