How to Inspect HTTP Requests and Responses

Now, let's see HTTP requests and responses in action.

So, open up Chrome, and head over to google.com.

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:

• Elements
• Console
• Sources
• Network
• Performance

In this demo, we are going to go to the Network tab so that we can inspect the Network traffic to and from google.com.

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 google.com.

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 GET a 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 GET
• Status code which is 200
• Remote address. This is the numeric representation of google.com

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.

P.S. This is a small sneak preview of my flagship course, The Art of Web Development. 14 Chapters and 111 Lessons that will teach you how to build a web app and get a high-paying job (even if you're just starting or don't have an idea).

Happy Coding!