Categorías: Labs

Firefox edición para desarrolladores 45 – Animaciones, Herramientas de memoria y más

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

La edición 45 de Firefox para desarrolladores tiene mejoras para las herramientas de desarrollo que permiten inspeccionar el uso de memoria, profundizar en las animaciones CSS, entre otras. En esta entrada cubriremos algunos de estos cambios, pero asegúrate de descargar la última versión de Firefox Developer Edition y probarlo tu mismo.

Herramienta de animaciones CSS mejorada

Mejor herramienta de animación CSS

La herramienta de animaciones tiene muchas mejoras:

  • Cuando haces clic en una animación dentro de la cronología, ahora verás una lista de las propiedades animadas ademas de los cuadros clave (keyframes), los cuales muestran como cambian sus valores a lo largo del tiempo.
  • Si una animación se mueve muy rápido para ver lo que está sucediendo, ahora puedes bajar la velocidad  de la misma, cambiando la tasa de reproducción.
  • Animaciones reproduciéndose en el hilo de ejecución del compositor (compositor thread) tienen un ícono de un rayo al lado. Esto significa que se mantendrá fluida aunque el resto de la página esté lenta.

Aprende más sobre el uso de la herramienta de animación en el último episodio de la serie de vídeos de Patrick Brosset: “Using the Dev Tools to understand CSS”.

Mas allá de las mejoras a la animación, la herramienta de búsqueda del inspector también fue mejorada. Ahora resalta los resultados de todos los marcos en la página y sub-cuadros de la animación.

¿Qué se come tu memoria?

Hemos mejorado la manera en que puedes inspeccionar el uso de memoria y encontrar lo que está consumiéndola. Comparando las diferencias entre capturas instantáneas de memoria, puedes inspeccionar los cambios en el contenido de la pila entre ambos estados. Y con el filtro disponible en las captura instantáneas, puedes mostrar solo la memoria asignada en una específica función, archivo o  mostrar solo los objetos de un tipo de clase en particular.

Lee mas sobre la Herramienta de memoria y documentación sobre como comenzar.

Herramienta de memoria de Firefox

Pulido de las herramientas

También hemos trabajado en pulir y reparar errores a lo largo de la caja de herramientas, a continuación veremos alguna de ellas.

Consola

Si estas trabajando con objetos WeakMap y WeakSet, ahora puedes ver su contenido en la consola web.

WeakMap y objetos WeakSet en la consola web de firefox

También, los registros que vienen de service workers se muestran por defecto en las pestañas de control. Sin embargo, aún existe mucho trabajo en cola para mejorar la experiencia de depuración de los service workers, sigue este bug para mas información.

Monitor de red

  • Ahora verás marcadores mostrando cuando los eventos de carga como DOMContentLoaded son disparados en la cronología de la pestaña de red.
  • Ahora puedes filtrar los nombres de los archivos en las cadenas de texto. Solo utiliza el prefijo “-” frente a cualquier cadena de texto, permitiendo reducir la lista de peticiones.

Consola de red de Firefox

Finalmente, agradecemos a los contribuyentes Albert Juhé y Tim Nguyen por ayudar a hacer la IU de la tabla del monitor de red con la misma apariencia que el resto de la caja de herramientas.

Existen un montón de mejoras en esta versión, así que descárgalo ahora. ¡Es gratis!

The following two tabs change content below.
Colaborador de Mozilla Venezuela e Hispano en las áreas de desarrollo y medios sociales, entre otros. También soy desarrollador Web, Skateboarder, Profesor universitario, jugador de Playstation y PC, usuario Linux, Blogger, Geek, entre otros.