Now, let's see HTTP requests and responses in action.
So, open up Chrome, and head over to
Now, we need to access Chrome DevTools. This is a very powerful tool that front-end developers use often.
Right click, then select Inspect element.
Now, here are the dev tools. The first time you see it, it might appear a bit intimidating. But trust me, these tools are much easier to use than you may think.
Through out this handbook, you're going to learn more about DevTools.
So, here we have a few different tabs:
In this demo, we are going to go to the
Network tab so that we can inspect the Network traffic to and from
Now, by default, Dev Tools is docked to the bottom of the screen. We can dock it to the left, to the right, or undock it as a separate window.
So, over here we can dock it to the left side like this:
A lot of front-end developers like this layout.
So, you may want to put DevTools on the left side and have the website on the right side.
In this demo, I am going to dock it as a separate window, so we have more space to work with.
So, lets undock it:
Now, we need to refresh our website.
Now, back to the DevTools.
These are the HTTP requests that are sent from our browser to
As you can see, there are a total of
45 requests. Here is the amount of data transferred over the network.
So, in this case, just over 94kb.
Now, let's look at the first item on this list.
This is the first HTTP request that Chrome sent to google.com. As you can see, with this request, the browser wanted to
document, and the
status of this request is
200 which means, OK.
Over here, we can see the amount of data transferred over the network for this request and the time it took to get the response.
If we click on this request, we can see more details about it.
So, here on the headers tab, we can see all the headers of our request and response.
Here are some general headers, like:
- Request URL
- Request Method which is
- Status code which is 200
- Remote address. This is the numeric representation of
Down below we can see Response Headers. There are many headers here, but you don't generally have to worry about them. As an example, look at
content-type. We talked about this in the previous section.
The type of this response is
text/html. Below that, we have the date and time of the response.
Now, if you click on the Preview tab, you can see preview of the HTML document that is returned from the server.
This is the home page of Google.
Now, in this HTML document we have references to other resources like Images, Fonts, and so on.
So, all these subsequent requests are sent to download those resources.
Right below the first request, we have a request for downloading a png or image file.
We can easily filter this list. So, let's click on the filter icon here:
By default, you see all the requests. But we can filter by request type.
For example, we can select
Doc to see requests for downloading HTML documents. Or
fonts to see the requests that were sent to download the fonts.