How to View and Edit HTTP Headers in Chrome?

HyperText Transfer Protocol or HTTP is the basic way of establishing communication between a client and a server. Your computer browser like Google Chrome acts like a client and send request to web server when you open any webpage. The server will return a response with a status code indicating the status of the communication whether it is successful or failed. This so called HTTP request and response contain various information used for troubleshooting and web designing purposes. Browsers like Chrome will hide HTTP header information and only show the final response body from the server. If you want to find header details, in this article, we will explore how to view and edit HTTP request and response headers in Chrome browser. You can follow similar process in other browsers like Edge and Firefox as well.

Checking HTTP Request and Response Headers

Many times, you will see errors on the browser with a three digit code called HTTP status code. For example, HTTP status code 404 indicates the requested page is not found on the server. The point here is that all 4xx HTTP status codes are related to error in the HTTP request sent by the browser. In order to troubleshoot these 4xx codes, it is necessary for you to understand the details sent in HTTP request header. Similarly, you may want to do testing by modifying details in the request header. For example, you can edit the cache-control header to no-store or no-cache and test how the server returns the page for different values.

On other hand, you can’t change the server configuration in production environment every time when you want to change and test the parameters. In such case, you need to mock the response header and check the final results in the client browser. Also, all 5xx status codes are due to error from server side and checking the response header can be help to understand these problems better.

Whatsoever is the reason, you can easily find all details in HTTP request/response headers using Chrome Developer Tool. However, you need a third-party extension for editing the header fields and test the modified response.

View HTTP Request and Response Headers in Chrome

Follow the below instructions on Google Chrome browser in Windows, Mac or in any other OS.

• Open the webpage you want to find the header details.
• Right-click on the page and select “Inspect” option.

• This will open Developer Tools section and go to “Network” tab.
• Now, press “Control + R” in Windows or “Command + R” in Mac or simply reload the page by clicking on the refresh button or F5 key.

• Chrome will start recording all network requests sent and the responses received from the server.
• Make sure to select “All” option to view all the requests sent from the page you are viewing.
• Select any request from the left pane and scroll down under “Headers” section on the right pane.
• You can find the HTTP request header details under “Request Headers” heading with each field showing the sent value. Similarly, response header from the web server can be found under “Response Headers” section.

• You can also make use of the “General” section showing HTTP status code when troubleshooting.
• Click on “Response” tab and then click pretty print icon to view the complete response body from server as you can see by viewing the page source.

Remember, a webpage may send hundreds of HTTP requests for images, stylesheets, fonts and scripts. You can see the total number of requests sent on the lower left corner of the developer tools screen (49 requests as seen in the above screenshot). Therefore, make sure to select correct request to find the required details. Also, check out out HTTP Header tool to check the important fields in server response headers online without using Chrome.

Edit HTTP Request and Response Headers in Chrome

Follow the below instruction for editing and testing HTTP request header fields in Chrome. You can edit response header fields in similar way.

• Open “chrome://apps” URL in the address bar and click on “Web Store” icon to launch Chrome Web Store.

• When you are in Web Store, search for “modify HTTP headers” and find ModHeader extension.
• Open the extension page and click “Add to Chrome” button to install the extension on your browser.

• After installation, click on the puzzle icon showing next to Chrome address bar and select ModHeader extension.

• Click + icon and select “Request header” option to add a field in the request header. If you want to add a filed in the response header, you need to select “Response header” option here.

• Type the header field name and click on the small arrow to select the field from the populated list.

• Enter the value for the field you want to assign. You can get the complete list of HTTP header fields in this Wikipedia article.

• By default, the extension will replace the value entered here if it finds the field in the header. However, click on the three vertical dots showing against the field and select “Append instead of override” option to append the field to existing value.

• You will see a notice “Empty header: remove” while typing the header name. Leave the name field empty to send an empty header field. Click on the notice to change it to “Empty header: send empty value” and leave the field blank to send the header field with empty value.

• You can add multiple header fields as you want to insert in the request and response.
• After that open Chrome Developer Tools, go to “Network” tab and reload the webpage.
• Now, you will see the added field appear in the request or response header. In our case, cache-control header overwritten the existing value from max-age=0 to no-cache which is the value we gave in the extension.

Remember, though the field is sent in the request header, not all fields will work as expected in the response. In the above example, we could see the cache-control is max-age=0 in the response which is same as the original response from the server. This is due to the fact that Chrome will restrict processing of certain field as mentioned in this documentation. This essentially means the response from the server will not be impacted and hence you should modify response header to get expected result on the browser.

Importing Profile and Adding Filters

The extension’s developer also offer some predefined profiles which you can simply import to your browser. For example, you can go the Enable CORS profile page on the developer’s documentation and click on the “Import” button. This will insert a new profile to enable CORS as shown below. However, this profile also restricts the header to only developer’s website by applying a URL filter. If you want to restrict the header only for certain websites, then replace the developer’s site URL with your values and add additional items if required.

Note: Once you edit the header fields, they will be applied to all the webpages you open. You need to delete the added fields or apply URL filters to restrict the headers only for specific pages.