November 19, 2018Jordan Lao4 min read
When I started web development, the developer tools were so new to me I thought I would save time not using them in the first place. I quickly realized how wrong I was as I started using them. No more console.log required, debugging became a piece of cake in a lot of cases!
The Network tab is used to track all the interactions between your front end and your back end, thus the network.
In this article, I will show usages of the developer tools Network tab on Google Chrome web browser.
Let's start exploring the network tab!
The first thing to do is to record the network logs by making sure the record button is activated before going on the page you want to record:
You can keep only the requests sent to your server by clicking on the filter icon and then selecting "XHR":
In that section, you can see some information about your requests:
To get more details about a request, you can simply click on it.
Let's look at the my-shortcuts endpoint that retrieves the shortcuts of an user connected on the application I am using. You can look at the formatted response by clicking on the "Preview" tab:
If the response of an XHR is an image, you will be able to preview the image instead.
On this tab, it becomes easy to determine if the format of the response corresponds to what your front end expected.
Great! Now you know how to check the response of a request sent to your server without writing any console.log in your code!
If the users of the application you are developing have a lower Internet speed than yours, it can be interesting to test your application with custom Internet speed.
It is possible to do so by using bandwidth throttling by clicking on the following dropdown menu:
Replaying a request can be useful if you want to see how the front end interacts with the response of a request again or if you need to test your request with different parameters. It can be long and painful to reload the page and reproduce exactly the same actions over and over again. Here are some better ways to replay a request:
In Postman, click on "Headers tab" > "Bulk Edit" to edit the headers:
I hope that I could help you debug your network interactions with this article!
Web Developer at Theodo