You can already track the path of every included file in Chrome DevTools.
For experiment, I set up a webserver on 127.0.0.42 (accessible via 127.0.0.42) and on 127.0.0.43 (accessible from third.party.domain.tld), so both of these servers are isolated.
The website X runs on 127.0.0.42 and has an overly simplistic webpage with this code:
<head>
<script src="js/A.js"></script>
<script src="http://third.party.domain.tld/js/B.js"></script>
</head>
It includes both a local A.js file and a B.js file from a third-party.
The A.js file has code of the same complexity level as our X page:
console.log("Hello from A.js!");
function include_script(source) {
var script = document.createElement("script");
script.src = source;
document.head.appendChild(script);
}
include_script("js/A1.js");
include_script("js/A2.js");
Note that the 7th line here is the line where the script file gets appended.
Both A1.js and A2.js have one line where they log two different messages to console.
The B.js file hosted on the third party server contains this code:
console.log("Hello from B.js!");
function include_style(source) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = source;
document.head.appendChild(link);
}
include_style("http://third.party.domain.tld/css/B.css");
This loads a stylesheet from the third party website.
Now open DevTools and use the Network tab:
Requests highlighted in red show A1.js and A2.js load initiated by the 7th line of A.js.
The request in blue shows B.css load initiated by the 8th line of B.js.
Green requests show the inclusion of both A.js and B.js from the (index) -- means the index page requested these.
Hover over names of each resource to reveal their original location.
Click on initiator link (the A.js:7 or (index)) to show the exact line where the resource load was triggered.
