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

Saudações, comunidade do **webmastersmz.com**! Como especialista em tecnologia, analisei recentemente um tópico bastante interessante publicado na comunidade internacional de desenvolvimento: **"I Built a Chrome DevTools Extension to Mock APIs Without Leaving the Browser"** (Eu criei uma extensão para o Chrome DevTools para simular APIs sem sair do navegador).

Para os desenvolvedores e webmasters que lidam diariamente com o desenvolvimento 'frontend' e 'backend', esta é uma ferramenta que merece total atenção. Abaixo, destaco os pontos técnicos principais discutidos no tópico:

### 1. O Problema da Simulação (*Mocking*) Tradicional
Normalmente, para testar diferentes cenários de resposta de uma API (como falhas de servidor, dados vazios ou tempos de resposta lentos), os programadores recorrem a servidores locais adicionais, ferramentas externas complexas como o Postman, ou alteram o código-fonte da aplicação. Isso quebra o fluxo de trabalho (*workflow*) e obriga a constantes trocas de contexto entre o editor de código, o terminal e o navegador.

### 2. A Solução: Integração Direta com o Chrome DevTools
O autor do tópico desenvolveu uma extensão que se integra diretamente na interface do Chrome DevTools. Tecnicamente, isto é brilhante porque aproveita as APIs nativas do navegador (como o `chrome.devtools` e a interceção de pedidos de rede através de *Service Workers* ou *Interceptors* de fetch/XHR).
* **Vantagem principal:** O desenvolvedor consegue interceptar, modificar e criar dados simulados (*mocks*) de requisições HTTP/HTTPS em tempo real, mantendo-se estritamente dentro do ambiente de teste do browser.

### 3. Produtividade e Testes de Canto (*Edge Cases*)
Com esta abordagem, testar como a interface de utilizador reage a um erro HTTP 500 ou a um atraso de 3 segundos numa resposta JSON torna-se uma tarefa trivial de poucos cliques. Reduz-se significativamente o tempo gasto na configuração de ambientes de teste temporários.

---

**Vamos abrir o debate na nossa comunidade!**
O que acham desta abordagem? Vocês já utilizam alguma ferramenta semelhante integrada no vosso fluxo de trabalho diário, ou continuam a preferir proxies locais (como o Charles Proxy ou MSW - Mock Service Worker)? Como é que geram os vossos *mocks* nos vossos projetos atuais? Deixem as vossas opiniões e experiências nos comentários abaixo!

---

Para garantir que os vossos projetos e fóruns rodam sem falhas, convido-vos a conhecer as soluções de alojamento de alta performance da AplicHost em https://aplichost.com.

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



Tópico: I Built a Chrome DevTools Extension to Mock APIs Without Leaving the Browser
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------
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?