Archivo HAR - Qué es y cómo generar uno

Cuando se trata de comprender las complejidades del rendimiento web y la resolución de problemas, los archivos HAR se destacan como una herramienta fundamental para los desarrolladores y equipos de soporte técnico. HAR, que significa HTTP Archive, es un formato de archivo utilizado para rastrear todas las interacciones que un navegador hace con un sitio web.

En esta guía completa, profundizaremos en qué son los archivos HAR y su importancia, y proporcionaremos un proceso paso a paso sobre cómo generar uno en varios navegadores populares como Chrome, Firefox, Safari y Edge.

Entendiendo los archivos HAR

¿Qué es un archivo HAR?

¿Qué es un archivo HAR?

Un archivo HAR es un registro en formato JSON de las interacciones de un navegador web con un sitio.

Registra todas las solicitudes enviadas y las respuestas recibidas, el tiempo que llevó obtener esas respuestas, encabezados, cookies y otros detalles que son cruciales para un análisis detallado. Al examinar un archivo HAR, uno puede identificar cuellos de botella en el rendimiento, identificar problemas de red y comprender el comportamiento de las aplicaciones web.

¿Por qué son importantes los archivos HAR?

Los archivos HAR son invaluables para desarrolladores y profesionales de TI porque proporcionan una vista granular de la secuencia de carga de cada elemento en una página web. Esto puede ser particularmente útil en:

• Diagnósticos de tiempos de carga lentos
• Depuración de ciclos complejos de solicitud y respuesta
• Analizar la secuencia de carga de recursos
• Identificar servicios de terceros que afectan al rendimiento

¿Cómo generar un archivo HAR en diferentes navegadores?

Google Chrome

• Paso 1Abre Developer Tools

  Haz clic derecho en cualquier parte de la página que quieras analizar y selecciona Inspeccionar, o presiona Ctrl+Shift+I (Cmd+Option+I en Mac).

• Paso 2Accede a la pestaña Network

  Haz clic en la pestaña Network en el panel de Developer Tools.

• Paso 3Graba la sesión

  Asegúrate de que el botón de grabar (el círculo rojo en la parte superior izquierda de la pestaña Network) esté activo. Si está gris, haz clic en él para empezar a grabar.

  

• Paso 4Recrea el problema

  Si no lo está ya, marca la casilla Preserve log. Haz clic en el botón gris con un círculo cruzado para eliminar cualquier registro existente desde la pestaña Network. Actualiza la página o realiza las acciones que llevan al problema que estás investigando.

• Paso 5Guarda el archivo HAR

  Haz clic derecho en cualquier parte de la red de solicitudes, selecciona Save all as HAR with content, y guarda el archivo en la localización deseada.

  

Mozilla Firefox

• Paso 1Abre Network Monitor

  Haz clic derecho en cualquier parte de la página y selecciona Inspeccionar elemento, luego haz clic en la pestaña Network o presiona Ctrl+Shift+E (Cmd+Option+E en Mac)

• Paso 2Empieza a capturar el tráfico

  La grabación comenzará automáticamente cuando abras Network Monitor.
  

• Paso 3Recrea el problema

  Actualiza la página o realiza las acciones necesarias para capturar el tráfico relacionado con tu problema.

• Paso 4Exporta el archivo HAR

  Haz clic derecho en cualquier parte de la cuadrícula de solicitudes de red, selecciona Save All as HAR, y elige donde quieres guardar el archivo.

  

Safari

• Paso 1Habilita el menú de desarrollo

  Ve a Safari > Ajustes > Avanzado y marca la casilla en la parte inferior que dice Mostrar características para desarrolladores web.

  

• Paso 2Abre el Web Inspector

  Haz clic derecho en cualquier parte de la página e Inspeccionar Elemento, luego haz clic en la pestaña Network o presiona Cmd+Option+I

• Paso 3Recrea el problema

  Actualiza la página o realiza las acciones necesarias para capturar el tráfico relacionado con tu problema.

• Paso 4Exporta como archivo HAR

  Después de completar los pasos que recrean el problema, haz clic en el botón Export en la parte superior derecha de la pestaña Network y guarda el archivo HAR.

  

Microsoft Edge

• Paso 1Acceder a Developer Tools

  Haz clic derecho en cualquier parte de la página y selecciona Inspect o presiona F12 o Ctrl+Shift+I

• Paso 2Navega a la pestaña Network

  Haz clic en la pestaña Network en la ventana de Developer Tools.

  

• Paso 3Graba la actividad de red

  Asegúrate de que la grabación esté activa (círculo rojo). Si no es así, haz clic para empezar.

  

• Paso 4Realiza las acciones

  Actualiza la página o recrea los pasos que necesitas para solucionar el problema.

• Paso 5Guarda el archivo HAR

  Haz clic derecho dentro de la lista de eventos de red y haz clic en Save all as HAR with content, luego guarda el archivo.

  

Analizando archivos HAR

Una vez que hayas generado un archivo HAR, si lo necesitas, puedes analizarlo usando varias herramientas online o inspeccionando manualmente el contenido en formato JSON. Busca tiempos largos de espera, solicitudes fallidas o archivos grandes que podrían optimizarse.

Conclusión

Los archivos HAR son un recurso poderoso para cualquiera que busque optimizar el rendimiento del sitio web o solucionar problemas. Siguiendo los pasos descritos anteriormente, puedes generar archivos HAR en Chrome, Firefox, Safari y Edge, obteniendo información valiosa sobre el funcionamiento interno de las interacciones web.

Preguntas frecuentes

¿Pueden los archivos HAR contener información sensible?

Sí, los archivos HAR pueden contener datos confidenciales como datos personales, cookies y tokens de autenticación. Es importante gestionar y compartir archivos HAR con precaución, asegurándote de que solo se comparten con partes de confianza y se almacenan de forma segura.

¿Cómo puedo ver el contenido de un archivo HAR?

Puedes ver los archivos HAR usando varias herramientas en línea como Google HAR Analyzer o software que pueda analizar el formato JSON. Estas herramientas te permiten visualizar los datos en un formato más legible.

¿Se usan los archivos HAR para pruebas de rendimiento?

Si bien los archivos HAR no se usan normalmente para pruebas de rendimiento automatizadas, son un recurso excelente para el análisis de rendimiento manual y pueden ayudar a identificar problemas que pueden no ser evidentes durante las pruebas automatizadas.

¿Generar un archivo HAR puede afectar el rendimiento del sitio web?

El proceso de generación de un archivo HAR no debería afectar significativamente el rendimiento del sitio web para el usuario. Sin embargo, las herramientas de desarrollo pueden consumir recursos adicionales del sistema en tu ordenador, lo que puede ralentizar ligeramente tu navegador o sistema operativo.

¿Es posible editar un archivo HAR?

Sí, dado que los archivos HAR están en formato JSON, se pueden editar con un editor de texto. Sin embargo, no se recomienda editar un archivo HAR a menos que sepas exactamente qué cambios necesitas hacer, ya que podría corromper el archivo o alterar los datos grabados.