Tracking http requests sent by the browser using javascript/jquery
Solution 1
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 theonRequestFired
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>
Solution 2
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.
Solution 3
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.
![Aruna Tebel](https://i.stack.imgur.com/1DlT0.jpg?s=256&g=1)
Aruna Tebel
Computer Science & Engineering undergraduate at University of Moratuwa, Srilanka. #SOreadytohelp
Updated on July 26, 2022Comments
-
Aruna Tebel almost 2 years
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.