I Built a Chrome DevTools Extension to Mock APIs Without Leaving the Browser

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.

To 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.

Mokup 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.

However, 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?