Javascript 如何在webite中识别js/css文件包含的来源_Javascript_Css_Google Chrome_Web

Javascript 如何在webite中识别js/css文件包含的来源

javascript css google-chrome web

Javascript 如何在webite中识别js/css文件包含的来源,javascript,css,google-chrome,web,Javascript,Css,Google Chrome,Web,我想知道是否有一种方法可以跟踪某些特定的.js或.css文件包含到网站中的确切路径，特别是来自第三方脚本，例如广告商假设我们有一个网站X。在这个网站上，包含了一个脚本a.js。但是，此文件加载A1.js和A2.js。同时，该站点将B.js作为第三方文件加载，其中包括B1.css 问题来了：如何跟踪包含文件的路径，例如X->A.js->（A1.js，A2.js）注: 在异步世界中，不再可能跟踪提交请求并按顺序对其排序您不能查看RefererHTTP阅读器，因为它总是指向X 最好是在Chrom

我想知道是否有一种方法可以跟踪某些特定的.js或.css文件包含到网站中的确切路径，特别是来自第三方脚本，例如广告商

假设我们有一个网站

。在这个网站上，包含了一个脚本

a.js

。但是，此文件加载

A1.js

和

A2.js

。同时，该站点将

B.js

作为第三方文件加载，其中包括

B1.css

问题来了：如何跟踪包含文件的路径，例如
X->A.js->（A1.js，A2.js）

注:

在异步世界中，不再可能跟踪提交请求并按顺序对其排序

您不能查看

Referer

HTTP阅读器，因为它总是指向

最好是在Chrome开发工具F12中跟踪它

你可以使用某种机器人来完成，或者只是手动完成

在所有浏览器中，您都可以看到HTML源代码，因此可以从中获取路径、查看源代码、获取路径等

资料来源：

希望这就是你想要的。

你可以使用某种机器人来完成，或者只是手动完成

在所有浏览器中，您都可以看到HTML源代码，因此可以从中获取路径、查看源代码、获取路径等

资料来源：

希望这就是你想要的。

有一个简单的开源webscraper，叫做HTTrack。它将下载以域名命名的文件夹中的所有资产。这是了解正在使用哪些资产以及来自哪个域的相对简单的方法

Charles是在您自己的计算机上运行的web代理（HTTP代理/HTTP监视器）。然后，您的web浏览器（或任何其他Internet应用程序）被配置为通过Charles访问Internet，Charles随后能够为您记录和显示发送和接收的所有数据

在Web和Internet开发中，您无法查看Web浏览器/客户端和服务器之间发送和接收的内容。如果没有这种可视性，则很难准确确定故障位置，而且很耗时。Charles使查看发生了什么变得容易，因此您可以快速诊断和修复问题

您已经可以跟踪Chrome DevTools中包含的每个文件的路径

为了进行实验，我在

127.0.0.42

（可通过

127.0.0.42

访问）和

127.0.0.43

（可从

第三方.domain.tld

访问）上设置了一个Web服务器，因此这两个服务器都是隔离的

网站

运行在

127.0.0.42

上，并且有一个带有此代码的过于简单的网页：

<head>
    <script src="js/A.js"></script>
    <script src="http://third.party.domain.tld/js/B.js"></script>
</head>

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");

请注意，这里的第7行是附加脚本文件的行

A1.js

和

A2.js

都有一行，它们将两条不同的消息记录到控制台

托管在第三方服务器上的

B.js

文件包含以下代码：

<head>
    <script src="js/A.js"></script>
    <script src="http://third.party.domain.tld/js/B.js"></script>
</head>

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并使用网络选项卡：

以红色突出显示的请求显示由

A.js

的第7行启动的

A1.js

和

A2.js

加载

蓝色的请求显示由

B.js

的第8行启动的

B.css

加载

绿色请求显示包含

（索引）

中的

A.js

和

B.js

——表示请求的索引页

将鼠标悬停在每个资源的名称上以显示其原始位置

单击启动器链接（A.js:7或

（索引）

）以显示触发资源加载的确切行