I recently had the amazing opportunity to of being interview for a customer support engineer position where I met amazing people and had the opportunity to learn new tricks for debugging using the developer’s tools. One of them was detecting the end-points a web page is connecting to fetch data and I decided to do a step by step on how to do that.
For the purpose of this tutorial, I am going to use one of the websites I have built since most websites in production can have a lot of information and could be a little difficult for starters.
The first thing that you have to do is visit the website you want to observe, in my case, I will go to http://localhost:3001/customers. I will see something as follow.
Once there we can open the developer tools, and go to the network section.
The network feature of google chrome only tracks network activity while is open therefore once there you can refresh the page to see all the resources that are being delivered to the browser.
From there you can click on the name of the end-point and get further details.
You can see the headers' general information and more information on both, the request and response headers.
You can preview the response body
or see the response raw body
See where the fetch request was initialize
Finally, see the timeline between the request and response.
The network section of the chrome developers’ tool is a good place to investigate if resources are being downloaded or uploaded as expected. The most common use cases for the Network panel are:
- Making sure that resources are actually being uploaded or downloaded at all.
- Inspecting the properties of an individual resource, such as its HTTP headers, content, size, and so on.
So it is a perfect place to start looking at how those requests are behaving and how resources are flowing through your application. You can learn more about Chrome Developers Tools at this link.