deniz.in

Markets

Weather

Loading weather

· via dev.to (home feed)

Mokup brings API mocking into Chrome DevTools with no mock server required

Mokup is a Chrome DevTools extension that records live fetch and XHR requests and turns them into editable mock rules, removing the need for a separate mock server or temporary code changes.

Mokup brings API mocking into Chrome DevTools with no mock server required

A DevTools panel that mocks API responses

A developer has released Mokup, a Chrome extension that adds an API-mocking panel to DevTools, letting frontend developers fake responses without running a separate server or touching application code. According to the author's announcement on dev.to, the extension records the requests a page makes and turns any of them into an editable mock rule.

The post positions the tool against a familiar set of workarounds. When a backend is unfinished, offline, or returns payloads that don't match the UI design, developers typically reach for a mock server such as -server or mockoon — which means running another process on another port with its own configuration — a full proxy tool that is powerful but heavyweight for a one-off response, or temporary code edits that have to be remembered and reverted before committing. Chrome's built-in request blocking can suppress a call but cannot fabricate a response. Mokup's pitch is that none of that is needed.

Capturing requests and building rules

The described workflow has few steps. After installing the extension from the Chrome Web Store, you open DevTools, switch to the Mokup tab and enable recording. As you interact with the app, calls appear in a Live tab showing each request's HTTP method, URL, status, type and timing. Clicking "Create Mock" on any captured request lets you edit the response body, and once the rule is toggled on, the next matching request receives the mocked payload instead.

Intercepted requests are logged back into the Live tab so it is visible which calls were served mocks, and rules can be switched off individually or all at once. The author's reasoning for building this into DevTools rather than a standalone app is convenience: the mock layer sits beside the network panel developers already watch, so there is no extra tool to launch or keep running.

How it behaves technically

Per the dev.to post, the extension is built on Manifest V3 and injects its interception script into the inspected tab only while the panel is open, so it does not monitor browsing in the background. Mock rules and captured data stay on the local machine; nothing is uploaded to an external server.

The tool is freemium. The free plan allows up to three mock rules, and a paid Pro licence — activated with a Polar licence key — lifts the cap to unlimited rules.

The author is also explicit about scope: Mokup intercepts fetch and XMLHttpRequest calls at the page-script level. It is not a general proxy, so navigation requests, WebSockets and binary responses are not covered in the current version. In practice that means it targets the common case of mocking JSON API responses during frontend development rather than all network traffic.

Why it matters

Mocking APIs is routine frontend work, and the usual methods impose a recurring tax: a mock server to run and configure, or debug edits that risk shipping to production. Bringing mocking into the tool developers already have open removes much of that friction, and deriving mocks from real captured requests means the fake responses match the shape of the actual API rather than hand-written guesses — useful for building UI ahead of a finished backend or rehearsing error states.

There are caveats worth weighing. This is a single-author project described in its own announcement, so the claims reflect the maker's account rather than independent testing. The three-rule free tier may feel tight for larger workflows, and the fetch/XHR-only coverage rules out WebSocket and binary mocking for now. For teams that mostly need to stub JSON endpoints quickly, though, the in-browser approach is a notable simplification of a persistently annoying task.

  • #chrome-devtools
  • #api-mocking
  • #browser-extensions
  • #frontend
  • #testing

Related posts