Debugging HTTP Requests and HTTP Responses

Introduction

Every day we interact with many websites during web browsing. To get any web resource using a web browser we generally fire a HTTP request to the server.

As developers, we should know what we are sending to the server from our browser using a HTTP request and what we are getting from the server as the HTTP response.

This article introduces an easy way to the see all the details of a HTTP request and HTTP response.

It is general awareness document.

Client - Server Request/Response diagram

Client Server Request Response diagram

Objective

Our objective here is to capture the following things during HTTP request and HTTP response:

  1. Request Headers
  2. Getting Cookie information
  3. Request body
  4. Response headers
  5. Response body

Approach

We would like to use IE 9 for this purpose.
 
Procedure

1. Open an IE 9 browser.

IE 9 browser

2. Press F12

After pressing F12 you will see the screen below.

Window

3. Click on the Network Tab and then click on the "Start capturing" button (from screen at Step 2).
 
4. After clicking "Start capturing", enter any URL into the address bar. Here I have typed http://c-sharpcorner.com.
 
The following screen will appear:

start capturing

5. The following is a deeper look of Step 4.

Deeper look window

The following describes the request (here from the screen above we can see the following things):

  1. Method type of HTTP request
  2. Status column (Result) with status code.  Here for the first line it is 200, in other words the status is success.
  3. Content type of request.
  4. Amount of bytes received
  5. Time taken for request. And so on.

6. Now double-click on the first selected row. We will get the details of the selected row. The following screen will display.

Description of Request
 
Here we can see the following details:

  1. Request headers
  2. Request body
  3. Response headers
  4. Response body
  5. Cookies and so on.
  • Screen for response headers

    response headers

We can see various details of the HTTP response from the server.

  • Screen for response body

    response body

Here we can see the HTML code that has been sent from the server.

  • Screen for cookies

    Screen for cookies

  • Screen for timings

    Screen for timings

In this screen we can see the timings between the request and the response from the server.
 
Conclusion

By using IE9 we can debug the HTTP request and HTTP response to check the details behind the scenes.