Visor y analizador de archivos HAR

¿Qué es un archivo HAR?

HAR significa HTTP Archive. Es un archivo JSON que registra la actividad de red de una pestaña: cada petición que hizo la página, lo que volvió y cuánto tardó cada paso. El formato se describió en un borrador de especificación, y la versión 1.2 es la que exportan hoy Chrome, Edge, Firefox y Safari, igual que proxies como Charles y Fiddler.

Dentro del objeto log encontrarás:

• pages: un registro por carga de página con sus tiempos de DOMContentLoaded y load.
• entries: un registro por petición, con el método, la URL, la versión HTTP, las cabeceras, las cookies, la cadena de consulta y los datos enviados.
• response: código de estado, cabeceras, cookies establecidas, tipo MIME, tamaños y a menudo el propio cuerpo (los cuerpos binarios se guardan en Base64).
• timings: cuánto tiempo pasó la petición bloqueada, en DNS, conectando, en TLS, enviando, esperando y recibiendo.
• Extras del navegador: campos que empiezan por guion bajo, como _resourceType y _transferSize de Chrome, que este visor usa cuando están presentes.

Cómo generar un archivo HAR en Chrome, Edge, Firefox y Safari

El proceso es igual en todos: abre las herramientas de desarrollo, conserva el registro entre cargas de página, reproduce el problema y exporta. Los nombres de menú de abajo son los de la interfaz en inglés; en herramientas configuradas en español aparecen traducidos.

Chrome y Edge limpian por defecto. Las versiones recientes dejan fuera del archivo exportado las cookies y las cabeceras Authorization. Si quien depura las necesita (por ejemplo, en un fallo de inicio de sesión), abre los ajustes de DevTools, ve a Preferences, busca la sección Network y activa Allow to generate HAR with sensitive data. Desde ese momento el menú de exportación ofrece una versión con datos sensibles. Envía ese archivo solo a alguien de confianza y limpia lo que no necesite.

Cómo leer la cascada y los tiempos

Cada barra de la cascada empieza cuando empezó la petición y mide lo que tardó, todo sobre una misma línea de tiempo que arranca con la primera petición del archivo. La línea azul marca DOMContentLoaded (el HTML ya está procesado) y la roja marca load (imágenes, estilos y scripts terminados). Los tramos de color dentro de cada barra son las fases:

• Bloqueada: tiempo en cola antes de que la petición pudiera salir. Si es largo, suele haber demasiadas peticiones a un mismo host a la vez (en HTTP/1.1 los navegadores abren unas seis conexiones por host) o una petición de menor prioridad esperando su turno.
• DNS: búsqueda de la IP del servidor. Solo la paga la primera petición a cada host.
• Conexión y SSL: abrir la conexión TCP y negociar TLS. En un archivo HAR el tiempo de SSL va incluido en el de conexión, y el visor los dibuja como tramos separados sin contarlo dos veces.
• Envío: subir la petición. Casi cero salvo que envíes un cuerpo grande.
• Espera (TTFB): tiempo hasta el primer byte, desde que termina el envío hasta que llega el primer byte de la respuesta. Es el tiempo de proceso del servidor más un viaje de ida y vuelta por la red. Una espera larga en una llamada a la API apunta al backend, no al navegador.
• Recepción: descarga de la respuesta. Si es larga, la respuesta pesa mucho o la conexión es lenta.

Patrones que conviene buscar: una escalera de peticiones que esperan cada una a la anterior (una cadena de dependencias que quizá puedas paralelizar), un hueco sin actividad de red (JavaScript ocupado antes del siguiente fetch) y una petición lenta de la que depende todo lo que viene después. Ordena por Tiempo para encontrar las llamadas más lentas o haz clic en la tarjeta Más lenta.

Archivos HAR y seguridad

Un archivo HAR es una copia completa de lo que tu navegador envió y recibió, y eso incluye las llaves de tu cuenta:

• Cookies de sesión: quien las tenga suele poder actuar como tú hasta que caduque la sesión, sin necesidad de contraseña.
• Tokens Bearer y claves de API: en cabeceras Authorization, cabeceras propias como X-API-Key y cadenas de consulta.
• Datos de formularios: todo lo que escribiste en un formulario mientras grababas, incluidas las contraseñas de una página de inicio de sesión.
• Datos personales: nombres, correos, direcciones y detalles de pedidos dentro de los cuerpos de respuesta.

No es teoría. En octubre de 2023, unos atacantes que entraron en el sistema de casos de soporte de Okta se llevaron tokens de sesión de archivos HAR que los clientes habían adjuntado a sus tickets. Antes de compartir un HAR: graba solo los pasos necesarios, usa una cuenta de prueba si puedes, pásalo por Limpiar aquí arriba, envíalo por el portal de soporte y no por un canal público, y cierra sesión después para que cualquier sesión que se haya colado deje de funcionar.

Archivos HAR en informes de bugs

Un HAR muestra lo que hizo la red, pero no lo que vio el usuario. Acompáñalo de contexto:

• Una captura o grabación de pantalla del mensaje de error o del estado roto, para que quede claro qué petición importa.
• La hora exacta y la zona horaria en que lo reprodujiste, para que el equipo de backend encuentre ese momento en los logs del servidor.
• Los pasos que seguiste mientras grababas, en orden.
• La petición que falla: activa Solo errores, apunta la URL, el estado y cualquier ID de petición de las cabeceras de respuesta, y cita el cuerpo del error.
• Navegador y versión, y si también falla en una ventana privada.

Copiar como cURL convierte una petición en un comando que un desarrollador puede volver a lanzar desde la terminal. Copia las cabeceras originales con sus tokens, así que quítalos antes de pegarlo en un sitio compartido.