DevHeader

How to mock API responses in Chrome without a backend

DevHeader is a free Chrome and Edge extension that intercepts fetch and XHR calls on sites you have granted permission for and returns a response you define, including GraphQL requests. Use it to build a UI before the API exists, reproduce a hard-to-trigger error, or check an empty state.

Steps

  1. Install DevHeader from the Chrome Web Store, then turn on Allow User Scripts in its details page at chrome://extensions (Chrome 138+).
  2. Open DevTools and switch to the DevHeader panel.
  3. Reload your page so the panel captures the request.
  4. Select the request and click Add to Mocks. Or click New Mock to start from scratch.
  5. Edit the status code, body, and headers, using the form or raw JSON view, then Save and enable the rule.
  6. Reload. Your page now receives the mocked response.

Try it on a live sample API in the playground, or read the full Mocks docs.

What you can mock

  • REST endpoints via fetch or XHR, matched by URL
  • GraphQL queries and mutations, matched by operation name
  • Any status code (200, 404, 500) to test error handling
  • Custom response headers and JSON bodies

Not supported: delaying or throttling responses. Mocks return the response you define immediately.

Why DevHeader

No proxy, dev server, or code change is needed. It has no <all_urls> permission, makes no network calls, and stores everything locally. It also modifies request and response headers and redirects URLs, so it works as a safer ModHeader alternative too.

FAQ

How do I mock an API response in Chrome?

Install DevHeader, open Chrome DevTools, and switch to the DevHeader panel. Reload the page, select the request you want to fake, and click Add to Mocks. Edit the status code, body, and headers, save, and enable the rule. The next reload returns your response instead of the real one.

Can DevHeader mock GraphQL requests?

Yes. A mock rule can match on the URL or on the GraphQL operation name, so you can fake one query without touching the others.

Can I simulate 500 and 404 responses?

Yes. Set any HTTP status code, such as 500 or 404, plus custom response headers and body, to test how your UI handles error states. DevHeader does not simulate response delay or latency.

Do mocks send my data anywhere?

No. Mock rules are stored in chrome.storage.local and run inside the page. DevHeader makes no network calls of its own.

What does DevHeader need to mock responses?

Chrome 138 or newer with the Allow User Scripts toggle turned on in the extension's details page at chrome://extensions. Mocks need the same one-time host-permission grant as other rules, and a mock runs on any site whose request matches its URL pattern.

Is this an alternative to mocking with a proxy or MSW?

It covers quick browser-side cases with no code changes, proxy, or dev server. For mocks shared across a team's test suite, a library such as MSW is still a better fit.