How to get list of network requests done by HTML

How can i get the list of network requests using Javascript done by the HTML, as seen in the chrome devtools.

For example: enter image description here

This is the devtools for google.com. I want to, using javascript get all these request in a list. is this possible? if yes how?

Answers:

Answer

Some browsers have implemented a version of the not-yet-standard, Resource Timing API where you can collect some of this information.

Some browsers may have some of this info available to browser extensions as part of their developer tools support, but that would require the installation of a custom extension, not something that could be done from a regular web page.

For very specific operations where you control the calling code or you know the calling code, it is possible to instrument some things. For example, if you know that all ajax calls go through one particular function, you can hook that function and it's completion handlers and monitor all ajax calls.

Answer

You can use Resource Timing API to get all relevant information (domain lookups, cache hits, redirects, etc.) about each resource being loaded on your website.

You can read about it here. There is also a bookmarklet that generates a page load waterfall using this API.

Resource Timing API is available in Chrome, Chromium, Chrome Mobile and IE10. Firefox team seems to be working on it.

Answer

As I understand it, you can consult the list of requests via JavaScript. It is? "I do not know how."

But one solution that can help is this ...

You intercept all requisitions with the code below. If your JavaScript runs very early in loading the page you will be able to get most of the requests from the list.

See how cool this 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

You could get the URLs of requests to be made when the page loads but retrieving any sort of statistics on load times is unrealistic. Query elements which make these kind of resource requests such as script, link or img.

For example:

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

I have written the code using the 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;
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.