I Built a Chrome DevTools Extension to Mock APIs Without Leaving the Browser
Every frontend developer knows this pain: the backend isn't ready, it's down, or it returns data that doesn't match the design. You need to build UI against an API that doesn't exist yet. The usual workarounds all have friction: - Spin up a mock server (json-server, mockoon) - another process, another port, another config to maintain. - Use a proxy tool - powerful, but heavy setup for a quick "give me this response" moment. - Edit your code - comment out the fetch, return hardcoded data, then remember to revert it before pushing. - DevTools Request blocking - blocks requests, but can't craft a response. So I built Mokup: a Chrome DevTools panel that captures live API requests and turns them into editable mock rules. No proxy. No server. No code changes. How it works - Install from the Chrome Web Store. - Open DevTools โ Mokup tab โ enable Recording. - Interact with your app - requests appear in the Live tab with method, URL, status, type, and timing. - Click Create Mock on any request, edit the response body, toggle the rule on. Done - the next matching request returns your mock response. Mocked requests are logged back to the Live tab so you can see what was intercepted, and you can enable/disable rules globally or per-rule. Why DevTools? Because that's where frontend developers already live. You don't open another tool, you don't change your workflow - the mock layer is right next to the network tab you're already looking at. Details worth knowing - Manifest V3, injected into the inspected tab only when the panel is open (no background interception of your browsing). - Mock rules and captured data stay local - nothing is sent to any server. - Free plan: up to 3 mock rules. Pro license (Polar license-key activation): unlimited rules. - Honest limitation: this is a page-script interception layer for fetch and XHR. It's not a full proxy - navigation requests, WebSockets, and binary responses aren't intercepted (yet). Try it - Install: https://chromewebstore.google.com/detail/mokup-mock-apis-in-devtoo/pemnjopjhbagogaojfgcfamailepnebb - Demo video:
If you try it, I'd love feedback - especially on the capture and mock-rule workflow. What's the biggest pain point in your current API mocking setup? Top comments (0)
Comments
No comments yet. Start the discussion.