How to edit network responses with only chrome dev tools

This article is a guide to editing network responses using the chrome dev tools.

Here is a simple example app which displays some user cards retrieved from an API. 

This is the API response for the contacts in the chrome dev tools network tab, which you can open by:

• Right clicking on the page
• Clicking inspect
• Navigating to the network tab
  
  

Let’s imagine our User object will have a new property added in the future – “extraInfo” which we want to display on the card if it exists. 

We can update the front end code to reflect the future changes:

But we can also test the expected API response before it has been deployed by creating an override for our request to the users endpoint:

Right click the request -> override content:

Next we select a folder to save the override response data in:

Then we give DevTools access to the folder:

Now you can edit your request:

Lastly, refresh your page and the override will be returned rather than the real response:

Here in the network tab we can see the edited response has been returned and the new front end feature is displaying!

If you are interested in trying out editing a network responses with chrome dev tools, fork this sandbox and add your own data to the users network response!

More tech articles:
Using ChatGPT to practice for frontend live coding interviews