DevHeader

Mocks

Mock Rules intercept fetch/XHR calls on your permitted domains and return a response you define instead of hitting the real network — useful for simulating an API response, an error state, or a backend that doesn't exist yet.

Before you start: turn on "Allow User Scripts". Mock Rules rely on Chrome's chrome.userScripts API (Chrome 138+) to reliably win the race against a page's very first fetch() call. Without it, mocks don't intercept anything. Go to chrome://extensions, open DevHeader's Details page, and turn on Allow User Scripts. The popup's Mocks tab has a status badge (top right) — green when mocks are running, or a lightbulb guide with an "Open extension settings" link if the toggle is still off; the same clickable guide is available in DevTools' Mock Management header too, next to a compact status badge.

Try it yourself

The demo below fetches from a small live sample API right on this page — no project of your own required.

  1. Open Chrome DevTools and switch to the DevHeader panel.
  2. Reload this page — the panel only captures requests made while it's open, so you'll see a fresh GET request to /api/playground/users appear in the list.
  3. Select it and click Add to Mocks.
  4. In the detail pane, edit the response — rename a user, remove one, or set the status code to 500 to see what an error response looks like. Click Save, then enable the rule.
  5. Reload this page again. It now renders your edited response instead of the real one.
GET /api/playground/users

Loading…

This demo also has its own page, if you'd rather link straight to it: Playground.

Two surfaces, two jobs

Mocks are split across the popup and DevTools on purpose:

  • Popup → Mocks tab — a quick, read-only list. Enable, disable, or delete a rule. Every change here applies immediately, no Save step.
  • DevTools → DevHeader panel → Mock Management — the full editor. Pick a rule from the list to edit its match type, URL, method, status code, response body, and headers in the detail pane on the right, then click Save.

If you need to change what a mock actually returns, do it from the DevTools panel — the popup can only turn rules on/off or remove them.

Creating a mock

There are two ways to start a new rule:

  1. Capture a real request. Open the DevHeader panel in DevTools, browse to trigger the request you want to mock, select it in the list, and click Add to Mocks. This creates a new rule pre-filled with the real response, so you can tweak it from there.
  2. Start from scratch. Click New Mock in the DevTools panel to open a blank rule and fill in everything yourself.

Either way, a newly created rule starts disabled — nothing gets intercepted until you've reviewed it and switched it on.

Scope

Mock Rules need the same one-time host-permission grant every other rule type needs (see Domains) — but unlike Headers and Redirects, they are not narrowed by the Domains list. Once permission is granted, a mock rule runs on any site whose request matches its own URL pattern, regardless of which domains are enabled for the active profile.

See also