web-dev-qa-db-fra.com

Comment obtenir la liste des requêtes réseau effectuées par HTML

Comment puis-je obtenir la liste des requêtes réseau en utilisant Javascript fait par HTML, comme on le voit dans les devtools de chrome.

Par exemple:enter image description here

C'est le devtools pour google.com. Je veux, en utilisant javascript obtenir toutes ces demandes dans une liste. Est-ce possible? si oui comment?

javascripthtmlhtml5google-chromegoogle-chrome-devtools
23
Nayish

Certains navigateurs ont implémenté une version de l’API pas encore standard , Resource Timing où vous pouvez collecter certaines de ces informations.

Certains navigateurs peuvent avoir certaines de ces informations disponibles pour les extensions de navigateur dans le cadre de la prise en charge des outils de développement, mais cela nécessiterait l'installation d'une extension personnalisée, et non d'une opération pouvant être effectuée à partir d'une page Web classique.

Pour des opérations très spécifiques où vous contrôlez le code d'appel ou vous connaissez le code d'appel, il est possible d'instrumenter certaines choses. Par exemple, si vous savez que tous les appels ajax passent par une fonction particulière, vous pouvez accrocher cette fonction et ses gestionnaires d'achèvement et surveiller tous les appels ajax.

16
jfriend00

Vous pouvez utiliser l'API Resource Timing pour obtenir toutes les informations pertinentes (recherches de domaine, accès au cache, redirections, etc.) sur chaque ressource en cours de chargement sur votre site Web.

Vous pouvez lire à ce sujet ici . Il existe également un bookmarklet qui génère une cascade de chargement de page à l'aide de cette API.

L'API de synchronisation des ressources est disponible dans Chrome, Chrome, Chrome Mobile et IE10. L’équipe de Firefox semble y travailler .

10
Konrad Dzwinel

Si je comprends bien, vous pouvez consulter la liste des demandes via JavaScript. Il est? "Je ne sais pas comment."

Mais une solution qui peut aider est la suivante ...

Vous interceptez toutes les commandes avec le code ci-dessous. Si votre JavaScript commence à charger la page très tôt, vous pourrez obtenir la plupart des demandes de la liste.

Voyez comme c'est cool cet article 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);
};
1
Sergio Cabral

J'ai écrit le code à l'aide de API de synchronisation de ressources

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

Vous pouvez obtenir les URL des demandes à effectuer lors du chargement de la page, mais il est irréaliste de récupérer des statistiques sur les temps de chargement. Les éléments de requête qui font ce type de demandes de ressources telles que script, link ou img.

Par exemple:

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