Interceptando Requisições com DevTools

Salve Salve! 🖖

Como mencionei no primeiro artigo da série, a ferramenta que usamos todos os dias como dev frontend é o navegador. Esta série de artigos tem como objetivo revelar explicações e funcionalidades escondidas dentro dele.

Muitas vezes, precisamos desenvolver o frontend de uma aplicação enquanto o backend ainda está em construção. Para esses casos, a funcionalidade de sobrescrita de respostas e headers HTTP pode ser uma grande aliada.

Este post não é uma documentação oficial nem pretende cobrir tudo. Ele traz a minha visão sobre a funcionalidade e como ela pode facilitar o nosso dia a dia como devs.

Introdução

Essa ferramenta do DevTools permite interceptar requisições HTTP e modificar seu conteúdo e cabeçalhos. Com ela, você consegue testar diferentes cenários e desenvolver sua aplicação frontend mesmo que a API ainda não esteja pronta, desde que o contrato de comunicação entre as pontas esteja definido.

Como usar?

Aqui vai um guia básico para ativar e aproveitar essa funcionalidade:

1. Abra o Chrome DevTools
   • Pressione F12 ou clique com o botão direito no site e selecione “Inspecionar”.
2. No painel Network
   • Selecione a requisição que você deseja modificar, clique com o botão direito e escolha a opção “Substituir conteúdo” ou “Substituir cabeçalho”.
   • Na primeira vez que você fizer isso, será necessário escolher uma pasta no seu sistema para armazenar os arquivos com os conteúdos fictícios.
3. No painel Sources
   • Caso tenha selecionado “Substituir conteúdo”, insira o conteúdo que será retornado na resposta da requisição.
4. Pronto! Agora é só utilizar.

Obs: Vale ressaltar que, enquanto houver alguma substituição ativa, o cache local é desativado.

Show me the code!

Para exemplificar como essa ferramenta funciona, vou interceptar um endpoint que ainda não está pronto e fazer com que ele retorne uma resposta fictícia para testar o preenchimento dos campos de um formulário no frontend.

Abaixo, vemos que esse endpoint ainda não existe, e por isso a API está retornando um 404:

O endpoint em questão busca os detalhes de uma despesa específica e preenche os campos do formulário de edição na tela.

Selecionando a requisição que queremos modificar e clicando em “Substituir conteúdo”, colamos um conteúdo fictício de uma despesa, respeitando o contrato da API. Pronto!

Nem preciso dizer que há muitas outras possibilidades de uso para essa ferramenta, como testar diferentes tipos de erros, onde cada um exibe uma mensagem diferente na tela, entre outros cenários.

Obs: Vale um lembrete rápido: sempre que o DevTools estiver fechado, as requisições funcionam normalmente. Elas só serão afetadas quando o DevTools estiver aberto.

Top demais!! 😻

E aí, curtiu? Espero que essa funcionalidade de sobrescrita ajude a simplificar seus testes e simulações no dia a dia. Se ficou alguma dúvida ou quiser trocar ideias, manda aí nos comentários que a gente continua a conversa!

See you soon!

Referências

• Documentação oficial: Chrome DevTools Overrides