How to mock an API response in Chrome

When the backend isn’t ready, or you need an edge case on demand, Headerbench can answer an API call with your own JSON. No proxy, no code changes, no patched fetch.

Return your own JSON

1. Install Headerbench and create a profile named Mocks. Mocks are a Pro feature; the 14-day trial starts when you save your first one, with no card.
2. Open Mocks and add a rule with the pattern ||api.example.com/v1/users^.
3. Set the content type to application/json and the body to {"users":[{"id":1,"name":"Ada Lovelace"}]}.
4. Open your app, turn the profile on in the popup and allow access to api.example.com and your app’s page when Chrome asks.
5. Reload your app. fetch('https://api.example.com/v1/users') now returns your body.
6. Use Test a URL to check which URLs the pattern catches, for example that /v1/users/42 is not one of them.

Limits to know

• Chrome serves the mock as a redirect to a data: URL, so the status is always 200 and the real server’s headers are not sent.
• Bodies can be up to 64 KB.
• Mocks apply to fetch/XHR, scripts, stylesheets, images, fonts and media, not to page or iframe navigations.
• For error statuses or delays, use a local mock server or a tool that patches fetch in the page, such as Requestly.