August 23, 2018
Sometimes you may need to be able to watch the networking activities that happen on a WEB page. Particularly, let’s say you need to create a networking activity inspector (pretty much like what Chrome has to offer with its Network tab from DevTools), but with some additional capabilities.
Specifically, we need to be able to start and stop the requests watching routine. This should be done so because when the watcher catches a request it should be able to temporarily stop it, log all the meta data about the request and put it in pending state. Once the request is in the pending state, the user of this tool should be able to release the request and let it flow further. The tool would not be logging information about response bodies, only the meta data about the actual requests will be logged into the UI.
The goal is to be able to watch these three types of requests that usually occur on a web page:
fetch()
API requestsXMLHttpRequest
objectsThe problem being stated, we can proceed to discuss the implementation of this tool. It will consist of 2 parts: