如何使用 HTML 完成的 Javascript 获取网络请求列表，如 chrome devtools 中所示。
例如：
这是 google.com 的开发工具。我想，使用 javascript 在列表中获取所有这些请求。这可能吗？如果是怎么办？
【问题讨论】：
标签： javascript html google-chrome google-chrome-devtools
一些浏览器已经实现了not-yet-standard、Resource Timing API 的一个版本，您可以在其中收集一些此类信息。
某些浏览器可能会将某些此类信息提供给浏览器扩展，作为其开发人员工具支持的一部分，但这需要安装自定义扩展，而不是可以从常规网页完成的操作。
对于您控制调用代码或知道调用代码的非常具体的操作，可以检测某些内容。例如，如果您知道所有 ajax 调用都经过一个特定函数，则可以挂钩该函数及其完成处理程序并监控所有 ajax 调用。
【讨论】：
您可以使用Resource Timing API 获取有关您网站上正在加载的每个资源的所有相关信息（域查找、缓存命中、重定向等）。
你可以阅读它here。还有一个 bookmarklet 使用此 API 生成页面加载瀑布。
资源计时 API 在 Chrome、Chromium、Chrome Mobile 和 IE10 中可用。火狐团队seems to be working on it.
【讨论】：
据我了解，您可以通过 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);
};
【讨论】：
我使用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;
}
【讨论】：
您可以在页面加载时获取要发出的请求的 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;
}
);
【讨论】：