Override HTTP responses and more in Chrome
Recently, I encountered a scenario in which I needed to modify a request from a remote server to check the behaviours of a website in production. The first option that came to mind was Fiddler, which I had used in the past for similar use cases. However, since it wasn’t installed on my system, I decided to do some research to see if there were any alternatives available. This led to an interesting revelation. Surprise, surprise! Chrome itself provides exactly what I need out of the box!
Let me explain how to do it. I’ll focus on my use case, which involves modifying the HTTP responses.
The first step is to open Chrome DevTools. You can do this by right-clicking and selecting “Inspect” or by using the keyboard shortcut Ctrl/Cmd + Shift + I. Next, navigate to the “Network” tab.
Begin by selecting the request you want to intercept. Since we’re modifying the response, right-click on the request and choose ‘Override content.’
Next, you need to specify the folder where the changes should be saved locally.
This will take you to the sources tab, where you can make the changes in response and save.
After saving the changes, the modified response will be loaded when you refresh the page.
Pro tip: If you prefer to make changes without switching to a new tab, you can use the escape key to bring up a secondary pane within the same DevTools view.
Response overriding is a powerful tool to have in your arsenal. Please note that it also supports response header and web content modifications. Be sure to consult the official documentation for more details on these capabilities.
