¿Odias los anuncios? Ir Sin publicidad Hoy

Archivos HAR — El registro de depuración HTTP que no sabías que necesitabas

Actualizado en

Los archivos HAR capturan cada solicitud HTTP que realiza su navegador — encabezados, tiempos, cuerpos de respuesta, tokens de autenticación. Aquí se muestra lo que contiene uno, cómo capturarlo y cómo utilizarlo cuando algo esté fallando.

Archivos HAR — El registro de depuración HTTP que no sabías que necesitabas 1
ANUNCIO · ¿ELIMINAR?

Tu llamada a la API falla en producción. Funciona bien en curl y funciona bien localmente. Soporte abre un ticket y te pide que «compartas un archivo HAR». Asentas con confianza y buscas en Google «qué es un archivo HAR» en otra pestaña.

Esta es esa pestaña. Aquí está lo que es un archivo HAR, qué contiene y cómo usarlo para encontrar realmente el problema.

Qué es un archivo HAR

HAR significa HTTP Archive. Es un archivo JSON que registra cada solicitud HTTP que tu navegador hizo durante una sesión — URLs, métodos, códigos de estado, encabezados de solicitud y respuesta, cuerpos de solicitud y respuesta, cookies y desgloses de tiempos. Todo ello, para cada solicitud en la página.

El formato fue estandarizado por el Grupo de Trabajo de Rendimiento en Web (versión 1.2 del especificación) y es compatible con Chrome, Firefox, Safari y Edge. Piensa en ello como una exportación estructurada de la pestaña de Redes de tu navegador — el tipo de cosa que darías a alguien que está depurando tu problema sin darle acceso SSH a tu máquina.

Los archivos HAR son especialmente útiles cuando el fallo es intermitente, cuando solo se reproduce en un navegador específico, o cuando necesitas mostrar a un proveedor que sí, su API devuelve un 500 y no es un problema de PEBKAC.

Cómo capturar un archivo HAR

Chrome y Edge

  1. Abre DevTools (F12 o Cmd+Option+I en Mac)
  2. Ve a la Red pestaña
  3. Activa Guardar registro si el fallo ocurre después de un redirección o recarga de página
  4. Reproduce el problema
  5. Haz clic en cualquier lugar en la lista de solicitudes → Guardar todo como HAR con contenido

Firefox

  1. Abre DevTools → Red pestaña
  2. Reproduce la solicitud
  3. Haz clic en el icono de engranaje → Guarda todo como HAR

Safari

  1. Activa el menú de Desarrollo: Safari → Configuración → Avanzado → Muestra el menú de Desarrollo
  2. Desarrollo → Muestra el Inspector de Web → Redes
  3. Reproduce el problema
  4. Haga clic en el Exportar botón (icono de flecha en la barra de redes)

Una cosa importante sobre Guardar registro: sin ella, el HAR solo captura solicitudes realizadas después de la carga actual de la página. Si el fallo ocurre durante la autenticación o dentro de una cadena de redirecciones, obtendrás un archivo vacío o engañoso y pasarás 20 minutos confundido. Actívala antes de reproducir el problema.

Qué contiene un archivo HAR

Cada archivo HAR comparte la misma estructura de nivel superior:

{
  "log": {
    "version": "1.2",
    "creator": { "name": "Chrome", "version": "124.0.6367.82" },
    "entries": [ ... ]
  }
}

El entries array es donde vive toda la información útil. Cada entrada es un par completo de solicitud/respuesta. Una carga típica de página produce entre 50 y 200 entradas; una SPA compleja cargando un panel de control puede superar ese número.

Entrada anotada: Los campos que importan

Aquí tienes un desglose de los campos clave en una sola entrada HAR:

CampoUbicaciónQué te dice
startedDateTimeEntradaCuándo se envió la solicitud, en formato ISO 8601 UTC. Correlaciona esto con los registros del servidor para encontrar la línea exacta del log.
timeEntradaMilisegundos totales desde el inicio de la solicitud hasta el final de la respuesta. El número por el que se ordenan cuando se busca una solicitud lenta.
serverIPAddressEntradaLa IP que realmente atendió esta solicitud. Crítica detrás de balanceadores de carga — te dice cuál instancia alcanzaste.
request.methodSolicitudGET, POST, PUT, DELETE, etc.
request.urlSolicitudURL completa incluyendo la cadena de consulta. Presta atención a los parámetros que podrían estar codificados dos veces aquí.
request.headersSolicitudTodos los encabezados de solicitud. Incluye Autorización — los tokens de autenticación están aquí. Este es el problema de privacidad.
request.postData.textSolicitudCuerpo de solicitud en formato bruto. Para APIs en JSON, este es tu payload. Si la API rechaza la entrada, revisa esto primero.
response.statusRespuestaCódigo de estado HTTP. 0 normalmente significa que la solicitud fue bloqueada antes de completarse.
response.headersRespuestaEncabezados de respuesta, incluyendo Content-Type, Cache-Control, Set-Cookie. Útil para depuración de CORS.
response.content.textRespuestaCuerpo de respuesta. Para APIs en JSON, este es el JSON bruto. Puede estar codificado en base64 para respuestas binarias.
timings.blockedTiemposTiempo esperando un slot de conexión TCP. Valores altos sugieren agotamiento del pool de conexiones.
timings.dnsTiemposTiempo de búsqueda DNS. Más de 50ms merece una revisión; más de 200ms es un problema.
timings.connectTiemposTiempo de conexión TCP. Valores altos = latencia de red o sobrecarga de TLS, no lentitud del servidor.
timings.waitTiemposTiempo desde que se envió la solicitud hasta que se recibió el primer byte (TTFB). Aquí es donde aparecen las APIs lentas. Un TTFB alto indica que el servidor es lento para responder.
timings.receiveTiemposTiempo para descargar el cuerpo de la respuesta. Solo alto si el cuerpo de la respuesta es grande.

Qué buscar realmente

Cuando abres un HAR, normalmente estás buscando una de estas tres cosas:

La solicitud que falla

Ordena o filtra por response.status. En Chrome DevTools puedes filtrar en línea con status-code:4xx o status-code:5xx. Una vez que tengas la solicitud que falla, lee el completo response.content.text — el mensaje de error del servidor es generalmente más útil que el código de estado.

La solicitud que es lenta

Ordena las entradas por timings.wait (TTFB) en orden descendente. Un valor alto wait = tu servidor es lento. Un valor alto timings.connect con valores normales wait = el punto de cuello es la red o el handshake de TLS, no tu aplicación. Estos indican soluciones completamente diferentes, por lo que obtenerlo correcto ahorra mucho tiempo al no acusar al estrato equivocado.

La solicitud que está faltando

A veces el error es una solicitud que falta — un webhook que no se ejecutó, un preflight OPTIONS bloqueado por CORS, una llamada de análisis que fue comida por un bloqueador de anuncios. Compara qué debería estar en el HAR con lo que está presente. La ausencia de una solicitud es datos.

El problema de privacidad que debes conocer

Los archivos HAR contienen todo. Incluye:

  • Authorization encabezados — tokens Bearer, credenciales de autenticación básica
  • Cookie encabezados — tokens de sesión, JWTs, cualquier cosa en una cookie
  • Cuerpos de solicitud y respuesta — que pueden contener contraseñas, datos personales sensibles (PII) o claves de API

Chrome no elimina ninguna de esta información al exportar. Antes de compartir un archivo HAR con soporte, un proveedor o un colega fuera de tu empresa, elimina o redacta los campos sensibles.

La forma más rápida de inspeccionar y limpiar un HAR antes de compartirlo es el Formateador de archivo HAR — pega tu archivo, navega por las entradas y redacta antes de enviar. Alternativamente, si estás cómodo con jq:

# Strip Authorization headers from all entries
jq '.log.entries[].request.headers |= map(select(.name | ascii_downcase != "authorization"))' file.har

No es la más elegante línea de código, pero funciona.

Leer un archivo HAR en formato bruto

Los archivos HAR son JSON, por lo que técnicamente son legibles en cualquier editor de texto. En la práctica, son enormes — una carga típica de página produce un archivo con cientos de kilobytes de encabezados y cuerpos, todos en claves profundamente anidadas. Algunas formas de navegarlos:

  • Importa en DevTools — Chrome y Firefox admiten importar archivos HAR en la pestaña de Redes mediante el icono de engranaje. Esto te da la misma interfaz de filtrado y ordenación que una captura en vivo.
  • Formateador de archivo HAR — Basado en el navegador, sin necesidad de instalación. Útil cuando envías el archivo a alguien que no usa DevTools.
  • jq — Para filtrado en línea de comandos. jq '.log.entries[] | select(.response.status >= 400) | {url: .request.url, status: .response.status}' extrae todas las solicitudes fallidas con sus URLs en segundos.

Para análisis rápido y filtrado, jq es más rápido. Para compartir y revisión visual, la importación en el navegador o un formateador en línea significa que la otra persona no necesita saber qué jq es.

¿Quieres eliminar publicidad? Adiós publicidad hoy

Instalar extensiones

Agregue herramientas IO a su navegador favorito para obtener acceso instantáneo y búsquedas más rápidas

añadir Extensión de Chrome añadir Extensión de borde añadir Extensión de Firefox añadir Extensión de Opera

¡El marcador ha llegado!

Marcador es una forma divertida de llevar un registro de tus juegos, todos los datos se almacenan en tu navegador. ¡Próximamente habrá más funciones!

ANUNCIO · ¿ELIMINAR?
ANUNCIO · ¿ELIMINAR?
ANUNCIO · ¿ELIMINAR?

Noticias Aspectos técnicos clave

Involucrarse

Ayúdanos a seguir brindando valiosas herramientas gratuitas

Invítame a un café
ANUNCIO · ¿ELIMINAR?