DEV Community

Cover image for How to Inspect HTTP Requests and Responses
Karlgusta Annoh
Karlgusta Annoh

Posted on

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.

Google Homepage

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.

Right clicking the Google home page to get the inspect element dropdown option

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:

Docking Dev Tools on the left side

A lot of front-end developers like this layout.

DevTools docked on the left

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:

Undocking the DevTools

Now, we need to refresh our website.

DevTools showing the Elements tab

Now, back to the DevTools.

DevTools showing the Network tab

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.

DevTools showing the total requests

So, in this case, just over 94kb.

Now, let's look at the first item on this list.

First item on the Network's list in DevTools

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.

Amount of data transferred over the network for a request shown in DevTools

If we click on this request, we can see more details about it.

More details of the request that shows the Headers

So, here on the headers tab, we can see all the headers of our request and response.

All the headers of our request

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

The general headers shown like request URL, Request Method, Status Code, and Remote address

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.

Response header - Content type

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.

The preview tab showing the home page of Google

This is the home page of Google.

The preview tab showing 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.

Requests in the network tab

Right below the first request, we have a request for downloading a png or image file.

A request in the network tab for downloading a png

We can easily filter this list. So, let's click on the filter icon here:

The filter icon on the networks tab

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.

Menu bar for filtering by Img, Doc, Fonts etc to see the requests that were sent to download the fonts

Happy Coding!

Top comments (0)