Javascript - 列出网络浏览器正在下载的文件

Question

在您访问网站的上下文中，浏览器会下载所有必需的文件(静态文件:CSS、脚本)或通过 AJAX 下载。好的。您可以使用开发工具浏览器中的“网络”选项卡实时查看下载过程。

我的问题是:是否可以像浏览器在“网络”选项卡中那样使用 JavaScript“监听”正在下载的文件？一个具体的例子是向用户展示浏览器正在从我的网站下载什么内容。

在互联网上搜索时，我发现可以重载 xhr native 函数:Add a "hook" to all AJAX requests on a page

尽管如此，我不认为图像和 CSS 下载会触发 xhr 函数，因为浏览器以自己的方式处理。

我很想听到社区对此的看法。

提前致谢!

Answer 1

如果您在 JavaScript 代码中显式下载资源，则可以注入(inject) Hook 来跟踪 AJAX 请求，如上面的消息所示。您也可以使用 Resource Timing API跟踪您的请求的网络计时信息，这很好。

但是，无法查看您无法控制的资源的网络信息，因为它需要访问浏览器引擎。

可以使用 Chrome 扩展程序获取此类信息，因为存在一个 API 可以让您获取此信息。请参阅chrome.devtools.network 。