Cómo capturar tráfico de localhost en Chrome (localhost:3000)

Si estás creando una app web (Next.js, React, Vite, etc.) e intentas depurar llamadas a la API, puede resultar confuso cuando todo funciona en el navegador, pero no aparece nada en Proxyman.

Este artículo muestra la forma más fiable de capturar tráfico de http://localhost:3000 desde Google Chrome.

1. Problema: no se puede capturar localhost:3000 durante el desarrollo web en Google Chrome

Una configuración habitual:

• Tu app se ejecuta en http://localhost:3000 (servidor de desarrollo de Next.js)
• Abres Chrome y navegas por tu sitio local
• Esperas ver el tráfico en Proxyman (o en Charles)

Pero Proxyman no muestra… nada.

Y lo peor: los sitios remotos (como https://google.com) sí pueden aparecer sin problemas, pero las solicitudes a localhost no aparecen en absoluto.

2. Motivo: el tráfico de localhost no usa el proxy del sistema por defecto

La mayoría de las herramientas de proxy dependen de la configuración de proxy del sistema (o de la del navegador) para enviar el tráfico a través del proxy.

Sin embargo, los navegadores suelen tratar las direcciones locales de forma especial:

• localhost / 127.0.0.1 es tráfico de bucle local (loopback)
• Por defecto, normalmente omite el proxy

Así, la solicitud nunca llega a Proxyman ni a Charles, por eso no ves ningún tráfico.

3. Solución antigua: editar /etc/hosts y usar proxyman.debug

La solución clásica consiste en dejar de usar localhost en la URL del navegador.

En su lugar, asigna localhost a proxyman.debug y abre tu servidor local con ese nombre de host.

3.1 Añade proxyman.debug a /etc/hosts

Abre Terminal y edita el archivo hosts:

1. Ejecuta:

sudo nano /etc/hosts

2. Añade esta línea:

127.0.0.1 proxyman.debug

3. Guarda y cierra el archivo.

Ahora, en lugar de abrir http://localhost:3000, abres:

• http://proxyman.debug:3000

Así Chrome lo trata como un nombre de host normal (no como el especial localhost), de modo que las herramientas de proxy pueden capturarlo.

3.2 Desventajas del método antiguo

• Tienes que acordarte de usar otro nombre de host
• Algunas URI de redirección de OAuth y herramientas de desarrollo local pueden tener localhost fijado en el código
• Es molesto explicárselo al equipo (y es fácil olvidarlo)

4. ✅ La nueva solución de 1 clic: Automatic Setup de Proxyman para Google Chrome

Proxyman ofrece un método más reciente que no requiere editar /etc/hosts.

Inicia Google Chrome con la configuración de proxy correcta para que se pueda capturar el tráfico de localhost.

4.1 Pasos

1. Abre Proxyman
2. Abre la Command Palette
   • macOS: Shift + Command + P
   • Windows/Linux: Ctrl + Shift + P
3. Escribe Automatic Setup y ábrelo.

4. Selecciona Google Chrome
5. Elige una opción:
   • New profile (recomendado si quieres un navegador limpio que solo use el proxy)
   • Current profile (si quieres usar tu perfil actual de Chrome)
6. Haz clic en Start

Se abrirá una nueva ventana de Google Chrome.

4.2 Listo: ya se captura localhost:3000

Ahora vuelve a abrir tu sitio local:

• http://localhost:3000

Vuelve a Proxyman: deberías ver capturadas tus solicitudes a localhost ✅

5. Conclusión

En este tutorial hemos visto por qué las solicitudes a localhost suelen omitir las herramientas de proxy, cómo funciona la solución antigua con /etc/hosts y cómo usar Automatic Setup de Proxyman para capturar localhost:3000 con 1 clic.

Si aún falta alguna solicitud, abre Chrome DevTools, activa la opción Disable cache en la pestaña Network y recarga la página dentro de la ventana de Chrome que abrió Proxyman. Una caché del navegador o un service worker puede devolver datos antiguos sin hacer una nueva solicitud de red. La opción New profile también es una forma rápida de comprobar si influye alguna extensión o una configuración guardada del navegador.

6. Artículos relacionados

• Cómo capturar tráfico HTTPS desde el navegador Firefox
• ¿Depurar SSL con Firefox?
• Capturar solicitudes HTTP del lado del servidor en NextJS
• Depurar las API de OpenAI en NodeJS con Proxyman
• Cambiar el endpoint de la API de producción al entorno localhost para pruebas

Proxyman es una app de alto rendimiento para macOS, Windows y Linux que permite a los desarrolladores capturar tráfico HTTPS en dispositivos iOS, en el simulador de iOS y en dispositivos Android.

Descárgala en https://proxyman.com