web-dev-qa-db-de.com

Wie bekomme ich eine Liste der Netzwerkanfragen per HTML?

Wie kann ich die Liste der Netzwerkanfragen mithilfe von Javascript mithilfe des HTML-Codes abrufen, wie in den Chrome-Devtools zu sehen ist.

Zum Beispiel:enter image description here

Dies ist das devtools für google.com. Ich möchte mit Javascript alle diese Anfragen in einer Liste erhalten. Ist das möglich? wenn ja wie?

javascripthtmlhtml5google-chromegoogle-chrome-devtools
23
Nayish

Einige Browser haben eine Version des not-yet-standard , Resource Timing API implementiert, in der Sie einige dieser Informationen sammeln können.

Einige Browser verfügen möglicherweise über einige dieser Informationen für Browsererweiterungen als Teil der Unterstützung für ihre Entwicklertools. Dies würde jedoch die Installation einer benutzerdefinierten Erweiterung erfordern. Dies kann nicht auf einer normalen Webseite erfolgen.

Für sehr spezifische Operationen, bei denen Sie den aufrufenden Code steuern oder wenn Sie den aufrufenden Code kennen, können einige Dinge instrumentiert werden. Wenn Sie beispielsweise wissen, dass alle Ajax-Aufrufe eine bestimmte Funktion durchlaufen, können Sie diese Funktion und ihre Beendigungshandler verknüpfen und alle Ajax-Aufrufe überwachen.

16
jfriend00

Sie können die Resource Timing - API verwenden, um alle relevanten Informationen (Domain-Lookups, Cache-Treffer, Weiterleitungen usw.) zu jeder auf Ihrer Website geladenen Ressource abzurufen.

Sie können darüber hier lesen. Es gibt auch ein bookmarklet , das mithilfe dieser API einen Seitenladewasserfall generiert.

Das Ressourcen-Timing-API ist in Chrome, Chromium, Chrome Mobile und IE10 verfügbar. Firefox-Team scheint daran zu arbeiten .

10
Konrad Dzwinel

Nach meinem Verständnis können Sie die Liste der Anfragen über JavaScript abrufen. Es ist? "Ich weiß nicht wie."

Aber eine Lösung, die helfen kann, ist diese ...

Sie fangen alle Anforderungen mit dem nachstehenden Code ab. Wenn Ihr JavaScript beim Laden der Seite sehr früh ausgeführt wird, können Sie die meisten Anforderungen aus der Liste abrufen.

Sehen Sie, wie cool dieser Artikel ist.

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);
};
1
Sergio Cabral

Ich habe den Code mit der Resource Timing API geschrieben

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;
}
1
Akash

Sie könnten die URLs von Anforderungen erhalten, die beim Laden der Seite gemacht werden müssen, aber das Abrufen von Statistiken zu den Ladezeiten ist unrealistisch. Abfrageelemente, die diese Art von Ressourcenanfragen stellen, wie script, link oder img.

Zum Beispiel:

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