Вы уже можете отслеживать путь к каждому включенному файлу в Chrome DevTools.
Для эксперимента я настроил веб-сервер на 127.0.0.42 (доступ через 127.0.0.42) и 127.0.0.43 (доступ изthird.party.domain.tld), поэтому оба этих сервера изолированы.
Веб-сайт X работает на 127.0.0.42 и имеет слишком упрощенную веб-страницу с таким кодом:
<head>
<script src="js/A.js"></script>
<script src="http://third.party.domain.tld/js/B.js"></script>
</head>
Он включаети локальный файл A.js и файл B.js от стороннего производителя.
Файл A.js имеет код того же уровня сложности, что и наша страница X:
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");
Обратите внимание, что 7-я строка - это строка, в которую добавляется файл сценария.
И A1.js, и A2.js имеют одну строку, в которую они записывают два разных сообщения на консоль..
Файл B.js, размещенный на стороннем сервере, содержит этот код:
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");
Это загружает таблицу стилей со стороннего сайта.
Теперь откройте DevToolsи используйте вкладку Сеть:
Выделенные запросыкрасным цветом показаны нагрузки A1.js и A2.js, инициированные 7-й строкой A.js.
. Запрос синим цветом показывает нагрузку B.css, инициированную 8-й строкой B.js.
*.1052 * Зеленые запросы показывают включение как
A.js, так и
B.js из
(index) - означает, что страница индекса запросила их.
Наведите указатель мыши на имена каждого ресурса, чтобы показать их исходное местоположение.
Нажмите на ссылку инициатора (A.js:7 или (index)), чтобы отобразитьточная строка, где была инициирована загрузка ресурса.
