Como Copiar Requisições de API da Aba Network

Quando você está depurando requisições de API no navegador e encontra um erro 400 ou 500, a maneira mais rápida de investigar é copiar essa requisição diretamente da aba Network e reproduzi-la em um cliente de API dedicado. Não é necessária nenhuma configuração de proxy. Veja como fazer isso de forma eficiente no Chrome, Edge e Firefox.

O Fluxo de Trabalho Padrão

Abra o DevTools (F12 ou Cmd+Option+I no Mac), navegue até a aba Network e dispare a ação que gera a requisição. Assim que a requisição aparecer na lista, clique com o botão direito nela para acessar as opções de cópia.

Antes de copiar, vale a pena verificar duas configurações:

• Filtrar por Fetch/XHR — Clique no botão de filtro “Fetch/XHR” para ocultar recursos estáticos e focar apenas em chamadas de API. Isso facilita muito a localização da requisição correta.
• Preserve log — Ative esta opção se a requisição ocorrer durante uma navegação de página ou redirecionamento. Sem ela, a aba Network é limpa durante a navegação e você perderá a entrada.

Para encontrar um endpoint específico rapidamente, use o painel de Search (Ctrl+F / Cmd+F na aba Network) e pesquise por fragmento de URL ou nome do endpoint.

Copy as cURL vs. Copy as Fetch

Ao clicar com o botão direito em uma requisição, você obtém várias opções de cópia. As duas mais úteis são Copy as cURL e Copy as fetch.

Copy as cURL

Esta é a opção com maior suporte no Chrome, Edge e Firefox. Ela produz um comando shell que você pode colar diretamente em um terminal ou importar em ferramentas como Postman ou Insomnia.

curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGci...' \
  -H 'Content-Type: application/json' \
  --data-raw '{"page":1}'

Melhor para: Testes no terminal, compartilhamento com colegas de backend, importação em clientes de API ou registro de bugs com uma requisição reproduzível.

Copy as Fetch

Esta opção gera uma chamada JavaScript fetch() que você pode colar diretamente no console do navegador ou em um script Node.js.

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Authorization": "Bearer eyJhbGci...",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ page: 1 })
});

Melhor para: Testes rápidos no console, reprodução de problemas em ambientes JavaScript ou estruturação de chamadas fetch no seu código.

Chrome e Edge também oferecem Copy as Node.js fetch e Copy as PowerShell para fluxos de trabalho específicos de ambiente.

Quando Requisições Copiadas Não Serão Reproduzidas com Sucesso

Copiar uma requisição captura seu estado naquele momento exato, incluindo cookies de sessão, tokens de autenticação e cabeçalhos CSRF. Reproduzi-la mais tarde pode falhar por várias razões:

• Tokens ou sessões expirados — JWTs e cookies de sessão têm TTLs. Uma requisição copiada há uma hora pode retornar um 401.
• Autenticação vinculada a cookies — Alguns fluxos de autenticação dependem de cookies HttpOnly que não são totalmente visíveis na saída copiada.
• Sequenciamento de requisições — Algumas APIs exigem uma requisição anterior (por exemplo, buscar um token CSRF) antes que a chamada alvo seja bem-sucedida.

Se uma requisição reproduzida falhar inesperadamente, verifique primeiro os cabeçalhos de autenticação.

Exportando Múltiplas Requisições: Arquivos HAR

Para capturar e exportar múltiplas requisições de uma vez, use a opção de exportação HAR na aba Network. Nas versões atuais do Chrome e Edge, as exportações HAR são sanitizadas por padrão e podem excluir cabeçalhos sensíveis como cookies e dados de autorização, a menos que você habilite explicitamente a exportação com dados sensíveis. O arquivo .har resultante (formato JSON) pode ser importado em ferramentas como Postman ou Insomnia, ou processado com ferramentas como jq para extrair URLs e payloads em massa.

Uma Nota sobre Segurança

Requisições copiadas frequentemente contêm dados sensíveis: tokens de autenticação, cookies de sessão, chaves de API e corpos de requisição. Antes de compartilhar um comando cURL ou arquivo HAR com um colega ou em um relatório de bug, sanitize-o — substitua tokens reais por placeholders como <TOKEN> e remova quaisquer dados pessoais do payload.

Conclusão

Copiar requisições de API da aba Network é uma das ações de depuração mais práticas no kit de ferramentas de um desenvolvedor frontend. Use Copy as cURL quando precisar de portabilidade e compatibilidade com ferramentas. Use Copy as fetch quando estiver permanecendo em um contexto JavaScript. De qualquer forma, você está a segundos de distância de uma requisição reproduzível e inspecionável.

FAQs

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.