Using Chrome Developer’s Tools To Detect End-Points.

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.

Here you can see all the resources sent from the server, third-parties, etc. to the browser in order to deliver the content. That includes HTTPRequest, CSS files, javascript files, and others. All the resources are together but we can filter them using the option on the top.

The one of interest is the XHR option. XHR stands for XMLHttpRequest which is a JavaScript API to create AJAX requests. Its methods provide the ability to send network requests between the browser and a server. In the case of the chrome developer tools, this option allows us to filter and visualize XHR or fetch requests.

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.

Conclusion

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.