O desenvolvimento web está em constante evolução, e a arquitetura cliente-servidor se tornou comum no ecossistema. Um desafio frequente é o tempo que desenvolvedores front-end gastam aguardando a implementação de novos endpoints de API pelo time de back-end. A simulação de APIs se destaca como solução eficiente, permitindo que desenvolvedores simulem respostas de APIs ao vivo, como manuseio de erros e códigos de status específicos.

O Chrome DevTools Local Overrides facilita essa tarefa sem integrações complexas ou a necessidade de escrever código.

Introdução ao uso do Chrome DevTools como ferramenta de simulação

Chrome DevTools oferece uma série de ferramentas para inspeção, depuração e teste de redes. Uma funcionalidade notável é o Local Overrides, que permite modificar recursos temporariamente para experimentar diferentes cenários diretamente no navegador.

Configuração do Local Overrides

Abra o DevTools em qualquer site, navegue até a aba Network, clique com o botão direito em uma solicitação que deseja substituir e escolha Override content. Após selecionar uma pasta para armazenar os arquivos de substituição, você pode modificar dados e atualizar a página para ver as alterações.

Benefícios de usar Chrome DevTools para simulação de APIs

• Capacidade de simular APIs e testar correções antes de irem para produção.
• Contornar problemas de CORS simulando cabeçalhos de resposta.
• Construir protótipos interativos de designs de UI sem back-end.
• Persistência de dados simulados no DevTools entre carregamentos de página.

Persistindo dados simulados

O Chrome Local Override persiste automaticamente os dados simulados e outros recursos substituídos no seu drive. Você pode abrir a pasta contendo os arquivos substituídos e editá-los em seu editor de código favorito, além de sincronizar a pasta para uma localização compartilhada para facilitar a colaboração.

Apesar das capacidades do Chrome DevTools, em alguns cenários, bibliotecas externas de simulação de APIs são mais adequadas, como em automação de testes, trabalho com múltiplos navegadores ou em pipelines CI/CD.

Se você está prototipando designs de UI sem um back-end ou testando correções de API antes de irem para produção, considerar o uso do Chrome DevTools Local Override pode facilitar muito suas tarefas.