Tracking http requests sent by the browser using javascript/jquery

Question

Using javascript or jquery, is there a way to track the http requests(including headers, parameters, etc.), sent by a webpage? What I want to achieve is something similar to the functionality of the 'network' tab of Google Chrome's developer console. All the solutions I found was either tracking Ajax requests or requests made using javascript(using XMLHttpRequest Object). This functionality should also be cross browser compatible.

As an extension or as code running in the browser? Code running in the browser is not going to have access to it. — epascarello
– epascarello, Commented Jun 4, 2015 at 12:22
You can check the request into your browser using console please Press F12 Key and click on the Network tab. now reload page you can see all the request and response. and once ajax will fire you can also see the ajax request and response. — Mitul
– Mitul, Commented Jun 4, 2015 at 12:27
Actually what I want is just a javascript function to do this. Not an extension. I need to track the requests sent only by the website which contains this javascript file. — Aruna Tebel
– Aruna Tebel, Commented Jun 4, 2015 at 12:27

Nick Hermans · Accepted Answer · 2015-06-04 12:27:32Z

1

You can't track everything.

For example some of the calls in Xmlhttprequest are transparent (301 HTTP codes) and can't be handle by javascript client side.

see the XMLHTTrequest specs: http://www.w3.org/TR/XMLHttpRequest/#infrastructure-for-the-send-method

This among a few other reasons. if you want to track the requests of a "webpage" it's better to use the development tools of that browser or packet capturing.

On the userExperience side you can only do very limited things.

answered Jun 4, 2015 at 12:27

Nick Hermans

863 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-04 12:30:12Z

You have three choices.

Make sure you know all the places where a request can get fired, and attach an event to it, say RequestFired. And bind the onRequestFired event in your JavaScript / jQuery code.
Go through the Network Developers document or each browser and based on the browser, execute it. This feature may not be available in older browsers like Internet Explorer 7 and 8.

If it is for a particular server, read the Server Log using a server side script and access it using an endpoint. You can use long polling method and fetch the contents of the log, may be this way:

    // jQuery
    $(document).ready(function () {
      setInterval (function () {
        $("#log").load("/path/to/endpoint.log");
      }, 5000);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <h3>Logs</h3>
    <div id="log"></div>

Supun Wijerathne · Accepted Answer · 2016-06-04 12:00:21Z

1

It can be done, if you are implementing a single page web-application with a framework like AngularJS. There you can do that using HTTP interceptors.

Other than that, you can only track Ajax requests, but not JavaScript requests.

answered Jun 4, 2016 at 12:00

Supun Wijerathne

13.1k11 gold badges73 silver badges101 bronze badges

Collectives™ on Stack Overflow

Tracking http requests sent by the browser using javascript/jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related