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

Question

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

例如：

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

Answer 1

有些浏览器已经实现了not-yet-standard，Resource Timing API的版本，您可以在其中收集部分信息。

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

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

Answer 2

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

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

资源计时API可在Chrome，Chromium，Chrome Mobile和IE10中使用。 Firefox小组seems to be working on it。

Answer 3

您可以在页面加载时获取请求的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; 
    }
);

Answer 4

据我了解，您可以通过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);
};

Answer 5

我已经使用Resource Timing API

编写了代码

function captureNetworkRequest(e) {
    var capture_newtwork_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_newtwork_request.push(capture_resource[i].name)
            }
        }
    }
    return capture_newtwork_request;
}