DEV Community

Cover image for Interceptando Requisições com DevTools
Guilherme Selair
Guilherme Selair

Posted on

1

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:

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.

formulario em branco

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!

fluxo completo

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more