Bit - loader

La depuración de JavaScript en navegadores (III)

   Artículo | JavaScript Development Bit - La depuración de JavaScript en navegadores (III)
Marino Posadas | 06/10/16

En las entradas anteriores hemos visto varias opciones para la depuración que nos ofrecen los navegadores modernos. Terminamos este recorrido aquí, viendo otras ventajas, que implican igualmente la idea de depuración, pero en otros aspectos difíciles de configurar o analizar con otras herramientas.

Otros aspectos de la depuración de JavaScript

Aparte de la depuración del código JavaScript, hay muchos otros aspectos donde el comportamiento o el rendimiento de una aplicación nos pueden plantear problemas. Tiempos de carga de la página inicial, comportamiento de elementos multimedia, tiempo de “renderización” de las páginas, etc.

En los navegadores actuales, como Firefox Developer Edition (FFDE), Chrome Canary (CC) o Edge, este tipo de opciones ocupan un lugar importante, y se asumen como fundamentales desde el principio. Por ejemplo, si cargo mi página desde FFDE, encuentro un montón de opciones relativas a la respuesta de la página sin recurrir a complementos exteriores.

En la solapa “Rendimiento” de las herramientas del desarrollador, podemos ver una descripción completa de ese comportamiento. E incluso, tenemos la opción de “grabar” un fragmento de la sesión y guardar los resultados para un análisis posterior.

Ese estudio puede, además, ser tan detallado como queramos, puesto que es posible seleccionar un fragmento potencialmente conflictivo, y ver su desglose al detalle:

javascript

Además, algunos aspectos llaman la atención, como el hecho de que podamos analizar también el tiempo empleado por el Recolector de Basura (GC), como indico en la captura de pantalla.

Observa también que esta vista es solo un aspecto, ya que podemos optar por las vistas “Waterfall” (Cascada) y “Flame Chart” (Grafico de Picos de Uso Máximo de la CPU), aparte de la posibilidad de filtrar por tipo de evento generado.

La otra gran herramienta “nativa” para el análisis de rendimiento a nuestra disposición es el grupo de opciones que nos aparece ligado a la solapa “Red”. Es un desglose detallado (y seleccionable) de cada una de las peticiones (requests) realizadas por la página. Admite análisis individual de cada uno de los elementos, pudiendo ver los detalles de la cabecera de la petición, así como de la respuesta.

javascript-1

Este contenido es, igualmente, filtrable por categorías: HTML, CSS, JS, gráficos, multimedia, etc.

Por último, quiero resaltar una herramienta presente en Chrome Canary, llamada “Audits“. Basándose en este tipo de datos que el navegador recaba en tiempo de ejecución, nos permite analizar cualquier sitio Web, y solicitar un sumario de mejoras que podemos añadir para mejorar el rendimiento del sitio.

Por ejemplo, si cargamos la propia página de Google Translate, y activamos la opción “Reload Page and Audit on Load” (hacer auditoría sobre una recarga), podemos ver que él mismo se hace las siguientes recomendaciones para la mejora del rendimiento:

javascript

Como vemos, no solo detecta posibles mejoras, sino que sugiere las potenciales soluciones que le podríamos dar al problema en cuestión. Por supuesto, no todas las soluciones que nos sugiera se podrán implementar en un sitio concreto (o quizá, ni siquiera nos interese hacerlo, porque la ganancia puede ser mínima), pero tendremos un sumario muy sencillo de potenciales problemas o aspectos mejorables en una siguiente revisión.


Entradas relacionadas

Cursos relacionados
Nuestro sitio utiliza cookies para análisis. Si no estás seguro de ello, echa un vistazo a nuestra política de privacidad.