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.

Answer 1

You have three choices.

1. 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.

2. 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.

   • Google Developers Doc
   • Firefox Network Information API
   • NetworkInformation.connection

3. 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>

Answer 2

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.