Ejecuta peticiones HTTP reales y observa exactamente qué pasa — tiempos, headers, status codes.
fetch() real Headers HTTP Status codes Timing real
¿Qué vas a hacer?
Vas a usar fetch() — la misma función que usan los desarrolladores — para hacer peticiones HTTP reales a APIs públicas. No hay simulación: verás los datos reales que viajan por internet.
Antes de empezar
El status code te dice si tuvo éxito: 200 = OK · 404 = no encontrado · 500 = error del servidor.
Los headers son metadatos: qué tipo de dato es, cuánto pesa, si puede cachearse.
El tiempo de respuesta en ms es el tiempo real que tardó el servidor en responderte.
Consola HTTP
Selecciona una URL de práctica o escribe la tuya:
HTTP Request Console
GET
Status
—
Tiempo
—
Tamaño
—
Tipo
—
—
Error de red:
Posibles causas: URL inválida, servidor bloqueó la petición (CORS), o sin conexión.
Desglose del viaje
Navegador procesa
Formatea la petición HTTP
—
DNS lookup
Convierte el dominio a IP
—
Conexión TCP + TLS
Establece canal seguro
—
Servidor responde
Procesa y envía datos
—
Descarga del body
Los datos llegan a tu navegador
—
Lo que acabas de ver
Status Code
2xx éxito · 3xx redirección · 4xx error tuyo · 5xx error del servidor. Cada número tiene un significado preciso.
Headers
Content-Type indica el formato, Cache-Control cuánto tiempo cachear, Access-Control-Allow-Origin controla CORS.
Latencia
El tiempo depende de: distancia geográfica al servidor, velocidad de tu ISP, carga del servidor, y si el DNS estaba cacheado.
HTTPS / TLS
Todas las APIs modernas usan HTTPS. El TLS handshake añade ~30-80ms la primera vez, pero la conexión se reutiliza en requests siguientes.
Desafíos — completa los 4
✓
Haz tu primer request exitoso (status 200)
Provoca un error 404 usando el preset correspondiente
Abre la pestaña Headers y encuentra Content-Type
Prueba 3 URLs diferentes y compara sus tiempos de respuesta
Pro tip: hazlo en el mundo real
Presiona F12 → pestaña Network y recarga cualquier página. Verás las mismas columnas: Status, Type, Size, Time — con todas las peticiones reales de la página.
Filtra por XHR/Fetch para ver solo peticiones a APIs, sin los assets (imágenes, CSS, JS).
¿Qué vas a hacer?