How to Inspect HTTP Requests and Responses
Tags: html, css, beginners, webdev
Published: 2023-10-03 05:32:49

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

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

![Google Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ptk4ijji99jrvv1d8un.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7r1vlbcvl673cbumv27.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwk1oqanfckxpax9je26.png 'Docking Dev Tools on the left side')

A lot of front-end developers like this layout.

![DevTools docked on the left](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfqxkjqdrirc0eygs7gn.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47johrah6v5udhcqlx32.png 'Undocking the DevTools')

Now, we need to refresh our website.

![DevTools showing the Elements tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gbvjm98l03wpgmaqnyf.png 'DevTools showing the Elements tab')

Now, back to the DevTools.

![DevTools showing the Network tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob3vzdvezj2heiuvjq4q.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5e2m02osbf0t1wt4o58.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxsaqqlbbovxom3hamnd.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upmpzz1dgsobsmfwvzp8.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pry91h9mehsbe33339ck.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ssuou4gfyxb87zvivgu.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcjfby8793wss68u43zy.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhznlds0kw4utk01k39m.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pibsmu2qhje2ui0876po.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfh5tx7vh61aifwty1t0.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syrtln733vew6xgnexfx.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4c5wjg2orpow4y0yjlj.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ai5vvosfwopcdlm7u9lh.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q41m6bodc7s44r4s2bh.png 'Menu bar for filtering by Img, Doc, Fonts etc 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](https://karlgusta.gumroad.com/l/mwiky/dz4c83r). 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!