The latest articles on DEV Community by Charles (@xpdev99). https://dev.to/xpdev99 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4090391%2F36b8f46f-f98e-4c94-b712-f24e81d1c6a9.jpg https://dev.to/xpdev99 en Charles Sun, 23 Aug 2026 04:03:52 +0000 https://dev.to/xpdev99/i-built-a-chrome-devtools-extension-to-mock-apis-without-leaving-the-browser-1klf https://dev.to/xpdev99/i-built-a-chrome-devtools-extension-to-mock-apis-without-leaving-the-browser-1klf <p>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.</p> <p>The usual workarounds all have friction:</p> <ul> <li> <strong>Spin up a mock server</strong> (json-server, mockoon) — another process, another port, another config to maintain.</li> <li> <strong>Use a proxy tool</strong> — powerful, but heavy setup for a quick "give me this response" moment.</li> <li> <strong>Edit your code</strong> — comment out the fetch, return hardcoded data, then remember to revert it before pushing.</li> <li> <strong>DevTools Request blocking</strong> — blocks requests, but can't craft a response.</li> </ul> <p>So I built <strong>Mokup</strong>: a Chrome DevTools panel that captures live API requests and turns them into editable mock rules. No proxy. No server. No code changes.</p> <p> <iframe src="https://www.youtube.com/embed/O6DSaGU4gJQ"> </iframe> </p> <h2> How it works </h2> <ol> <li>Install from the Chrome Web Store.</li> <li>Open DevTools → Mokup tab → enable <strong>Recording</strong>.</li> <li>Interact with your app — requests appear in the Live tab with method, URL, status, type, and timing.</li> <li>Click <strong>Create Mock</strong> on any request, edit the response body, toggle the rule on. Done — the next matching request returns your mock response.</li> </ol> <p>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.</p> <h2> Why DevTools? </h2> <p>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.</p> <h2> Details worth knowing </h2> <ul> <li>Manifest V3, injected into the inspected tab <strong>only when the panel is open</strong> (no background interception of your browsing).</li> <li>Mock rules and captured data stay <strong>local</strong> — nothing is sent to any server.</li> <li>Free plan: up to 3 mock rules. Pro license (Polar license-key activation): unlimited rules.</li> <li>Honest limitation: this is a page-script interception layer for <code>fetch</code> and XHR. It's not a full proxy — navigation requests, WebSockets, and binary responses aren't intercepted (yet).</li> </ul> <h2> Try it </h2> <ul> <li>Install: <a href="https://chromewebstore.google.com/detail/mokup-mock-apis-in-devtoo/pemnjopjhbagogaojfgcfamailepnebb" rel="noopener noreferrer">https://chromewebstore.google.com/detail/mokup-mock-apis-in-devtoo/pemnjopjhbagogaojfgcfamailepnebb</a> </li> <li>Demo video: <a href="https://www.youtube.com/watch?v=O6DSaGU4gJQ" rel="noopener noreferrer">https://www.youtube.com/watch?v=O6DSaGU4gJQ</a> </li> </ul> <p>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?</p> showdev webdev api javascript