Mock Response with Chrome Developer Tools
TL;DR
There are some tools or extensions you can use to override an api response but they are for free until you reach a usage limit.
You can now override (since Chrome 117) response content and headers with the help of DevTools in Chrome (or other Chromium based web browsers). For now, you cannot override status code of an api response.
In this post, I will be modifying the response content of an api request. For this, open your DevTools and in Network tab search for the api url whose response you want to modify:
Right click and click on “Override content” in the menu. It will let you choose a folder so that it can save your modified api contents in files. I created a folder named “MODIFY_API_RESPONSE” just for this and will choose it:
Since it is the first time you are using this feature, it will ask your permission for folder access to the path you have just chosen:
I am using Brave browser (since it is Chromium based, I can use the same feature there):
After I click allow, it will open a new tab with the current content of the api response in Sources tab of DevTools:
I will modify the response (by adding a new line just as the screenshot above) and hit Ctrl + S.
You will see a dot next to the file content; it is meant to show that it is overridden. Refresh the page so that it will make the api request again and now you will also see the same dot icon on the network api request.
If you want to navigate to the containing folder of modified request contents (that you have chosen and given permission), right click on the api request and click on “Open in containing folder”:
It will open the folder you have chosen to save your overriden request contents. See how the folders are structured (according to the api url):
To reopen or see the modified response, right click on the request again and click on “Open in Sources panel” so that it will open in Sources tab as before. You can also open the file in the folder with an editor program of your choice.
Happy Coding!
