Cómo copiar solicitudes API desde la pestaña Network

Cuando estás depurando solicitudes API en el navegador y detectas un error 400 o 500, la forma más rápida de investigar es copiar esa solicitud directamente desde la pestaña Network y reproducirla en un cliente API dedicado. No se requiere configuración de proxy. Aquí te mostramos cómo hacerlo de manera eficiente en Chrome, Edge y Firefox.

El flujo de trabajo estándar

Abre DevTools (F12 o Cmd+Option+I en Mac), navega a la pestaña Network y activa la acción que dispara la solicitud. Una vez que la solicitud aparezca en la lista, haz clic derecho sobre ella para acceder a las opciones de copiado.

Antes de copiar, vale la pena verificar dos configuraciones:

• Filtrar por Fetch/XHR — Haz clic en el botón de filtro “Fetch/XHR” para ocultar recursos estáticos y enfocarte solo en llamadas API. Esto facilita mucho localizar la solicitud correcta.
• Preserve log — Habilita esto si la solicitud ocurre durante una navegación de página o redirección. Sin esta opción, la pestaña Network se limpia al navegar y perderás la entrada.

Para encontrar un endpoint específico rápidamente, usa el panel Search (Ctrl+F / Cmd+F en la pestaña Network) y busca por fragmento de URL o nombre del endpoint.

Copy as cURL vs. Copy as Fetch

Al hacer clic derecho en una solicitud obtienes varias opciones de copiado. Las dos más útiles son Copy as cURL y Copy as fetch.

Copy as cURL

Esta es la opción más ampliamente soportada en Chrome, Edge y Firefox. Produce un comando de shell que puedes pegar directamente en una terminal o importar en herramientas como Postman o Insomnia.

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

Mejor para: Pruebas en terminal, compartir con compañeros de backend, importar a clientes API o reportar bugs con una solicitud reproducible.

Copy as Fetch

Esto genera una llamada JavaScript fetch() que puedes pegar directamente en la consola del navegador o un script de Node.js.

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

Mejor para: Pruebas rápidas en consola, reproducir problemas en entornos JavaScript o estructurar llamadas fetch en tu código base.

Chrome y Edge también ofrecen Copy as Node.js fetch y Copy as PowerShell para flujos de trabajo específicos del entorno.

Cuando las solicitudes copiadas no se reproducen exitosamente

Copiar una solicitud captura su estado en ese momento exacto, incluyendo cookies de sesión, tokens de autenticación y encabezados CSRF. Reproducirla más tarde puede fallar por varias razones:

• Tokens o sesiones expiradas — Los JWT y cookies de sesión tienen TTL. Una solicitud copiada hace una hora puede devolver un 401.
• Autenticación vinculada a cookies — Algunos flujos de autenticación dependen de cookies HttpOnly que no son completamente visibles en la salida copiada.
• Secuenciación de solicitudes — Algunas APIs requieren una solicitud previa (por ejemplo, obtener un token CSRF) antes de que la llamada objetivo tenga éxito.

Si una solicitud reproducida falla inesperadamente, verifica primero los encabezados de autenticación.

Exportar múltiples solicitudes: archivos HAR

Para capturar y exportar múltiples solicitudes a la vez, usa la opción de exportación HAR en la pestaña Network. En las versiones actuales de Chrome y Edge, las exportaciones HAR están sanitizadas por defecto y pueden excluir encabezados sensibles como cookies y datos de autorización a menos que habilites explícitamente la exportación con datos sensibles. El archivo .har resultante (formato JSON) puede importarse en herramientas como Postman o Insomnia, o procesarse con herramientas como jq para extraer URLs y payloads en masa.

Una nota sobre seguridad

Las solicitudes copiadas a menudo contienen datos sensibles: tokens de autenticación, cookies de sesión, claves API y cuerpos de solicitud. Antes de compartir un comando cURL o archivo HAR con un colega o en un reporte de bug, sanitízalo — reemplaza los tokens reales con marcadores de posición como <TOKEN> y elimina cualquier dato personal del payload.

Conclusión

Copiar solicitudes API desde la pestaña Network es uno de los movimientos de depuración más prácticos en el kit de herramientas de un desarrollador frontend. Usa Copy as cURL cuando necesites portabilidad y compatibilidad con herramientas. Usa Copy as fetch cuando te mantengas en un contexto JavaScript. De cualquier manera, estás a segundos de tener una solicitud reproducible e inspeccionable.

Preguntas frecuentes

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.