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

Question

如何使用HTML完成的Javascript获取网络请求列表,如chrome devtools中所示.

例如:

这是google.com的devtools.我想,使用javascript在列表中获取所有这些请求.这可能吗？如果有,怎么样？

Answer 1

有些浏览器已经实现了一个版本的尚未规范,资源定时API,你可以收集一些信息.

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

对于您控制调用代码或您知道调用代码的非常具体的操作,可以检测一些事情.例如,如果您知道所有ajax调用都通过一个特定函数,您可以挂钩该函数,它是完成处理程序并监视所有ajax调用.

Answer 2

您可以使用Resource Timing API获取有关您网站上加载的每个资源的所有相关信息(域查找,缓存命中,重定向等).

你可以在这里阅读它.还有一个使用此API生成页面加载瀑布的书签.

资源计时API可在Chrome,Chromium,Chrome Mobile和IE10中使用.Firefox团队似乎正在努力.

Answer 3

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

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

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

看看这篇文章多么酷。

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

Answer 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;
}