如何获取由 HTML 完成的网络请求列表

Posted 2023-03-05

【中文标题】如何获取由 HTML 完成的网络请求列表

【英文标题】：How to get list of network requests done by HTML

【发布时间】：2014-01-04 10:38:56

【问题描述】：

如何使用 html 完成的 javascript 获取网络请求列表，如 chrome devtools 中所示。

例如：

这是 google.com 的开发工具。我想，使用 javascript 在列表中获取所有这些请求。这可能吗？如果是怎么办？

【问题讨论】：

此代码是网站的一部分还是 Chrome 扩展程序的一部分？

它是网站的一部分，对 chrome devtools 的引用只是为了解释我想在 javascript 中获得什么样的信息...

你可以从 DOM 中获取其中的一些，比如图片和 css 图片，以及 css sheet url、iframe、flash 等，其他的比如 ajax 是无法从 js 中获取的。

你可以得到一些，但不是全部。

【参考方案1】：

一些浏览器已经实现了not-yet-standard、Resource Timing API 的一个版本，您可以在其中收集一些此类信息。

某些浏览器可能会将某些此类信息提供给浏览器扩展，作为其开发人员工具支持的一部分，但这需要安装自定义扩展，而不是可以从常规网页完成的操作。

对于您控制调用代码或知道调用代码的非常具体的操作，可以检测某些内容。例如，如果您知道所有 ajax 调用都经过一个特定函数，则可以挂钩该函数及其完成处理程序并监控所有 ajax 调用。

【讨论】：

为什么投反对票？这个答案有什么不正确的？或者什么会使它成为更好的答案？

这是正确的。此级别的任何类型的检查都必须在扩展程序中完成（至少在 Chrome 的情况下）。 developer.chrome.com/extensions/devtools_network.html

网络页面上的文件是否可以全部获取？如果您正在创建浏览器扩展程序？

@oldboy - 我不知道。必须研究扩展 API 才能了解您可以访问什么。

在没有浏览器扩展的情况下仍然无法做到这一点？即使有节点之类的东西？

【参考方案2】：

您可以使用Resource Timing API 获取有关您网站上正在加载的每个资源的所有相关信息（域查找、缓存命中、重定向等）。

你可以阅读它here。还有一个 bookmarklet 使用此 API 生成页面加载瀑布。

资源计时 API 在 Chrome、Chromium、Chrome Mobile 和 IE10 中可用。火狐团队seems to be working on it.

【讨论】：

我发现您的回答比仅仅说“无法完成”更有用。谢谢。

【参考方案3】：

据我了解，您可以通过 JavaScript 查阅请求列表。它是？ “我不知道怎么做。”

但是可以提供帮助的一种解决方案是...

您使用以下代码拦截所有申请。如果您的 JavaScript 在加载页面的早期运行，您将能够从列表中获取大部分请求。

看看这article 有多酷。

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(value) 
    this.addEventListener("progress", function()
        console.log("Loading. Here you can intercept...");
    , false);
    this.realSend(value);
;

【讨论】：

请求结束后不需要移除事件监听器吗？

我明白没有必要。因为在达到最终状态后，实例不再触发任何事件。

【参考方案4】：

我使用Resource Timing API编写了代码

function captureNetworkRequest(e) 
    var capture_network_request = [];
    var capture_resource = performance.getEntriesByType("resource");
    for (var i = 0; i < capture_resource.length; i++) 
        if (capture_resource[i].initiatorType == "xmlhttprequest" || capture_resource[i].initiatorType == "script" || capture_resource[i].initiatorType == "img") 
            if (capture_resource[i].name.indexOf('www.demo.com OR YOUR URL') > -1) 
                capture_network_request.push(capture_resource[i].name)
            
        
    
    return capture_network_request;

【参考方案5】：

您可以在页面加载时获取要发出的请求的 URL，但检索任何类型的加载时间统计数据都是不现实的。发出此类资源请求的查询元素，例如 script、link 或 img。

例如：

var urls = Array.prototype.map.call(
    document.querySelectorAll("link, img, script, iframe"), // Elements which request external resources
    function(e)  // Loop over and return their href/src
        return e.href || e.src; 
    
);

【讨论】：

好吧，如果你想要任何关于它们的真实统计数据，你当然必须重复请求。

我的意思是由元素自己完成的重定向......就像图像的来源是一个重定向到图像的页面