{
  "id": 2715736,
  "title": "I Built a Chrome DevTools Extension to Mock APIs Without Leaving the Browser",
  "url": "https://urgent.news/2026/08/23/i-built-a-chrome-devtools-extension-to-mock-apis-without-leaving-the",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-23T04:03:52.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/xpdev99/i-built-a-chrome-devtools-extension-to-mock-apis-without-leaving-the-browser-1klf"
  },
  "original_language": "en",
  "account": "Frontend developers often face the challenge of building UI against APIs that haven't been developed yet. The usual solutions, like creating a mock server or editing code, are often cumbersome. To address this issue, the developer created Mokup, a Chrome DevTools extension that captures live API requests and converts them into editable mock rules.\n\nTo use Mokup, install it from the Chrome Web Store and enable recording in the DevTools. As you interact with your app, requests will appear in the Live tab with details such as method, URL, status, type, and timing. By clicking Create Mock on any request, you can edit the response body and toggle the rule on. The mocked requests are logged back to the Live tab, allowing you to see what was intercepted and enabling/disable rules globally or per-rule.\n\nMokup leverages the DevTools you're already using, so there's no need to open another tool or change your workflow. It's installed only when the panel is open, and mock rules and captured data stay local, ensuring no data is sent to any server. The extension is available in a free plan, allowing up to 3 mock rules, or a Pro license with unlimited rules.\n\nHowever, Mokup currently only intercepts fetch and XHR requests, not navigation requests, WebSockets, or binary responses. If you decide to give Mokup a try, provide feedback, especially on the capture and mock-rule workflow. The biggest pain point in your current API mocking setup?",
  "summary": "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…",
  "key_points": [
    "Mokup extension captures live API requests in Chrome DevTools",
    "Users edit response bodies and toggle mock rules on intercepted requests",
    "Extension is free with up to 3 mock rules or Pro license for unlimited rules"
  ],
  "editors_take": "This development streamlines frontend development by integrating API mocking directly into Chrome DevTools, eliminating the need for separate tools or code edits and allowing developers to work more efficiently.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}