En Chrome también hay una opción muy curiosa para debuguear animaciones 👀. Simplemente le dan click al botón de los 3 puntitos de las DevTools, seleccionan "More Tools" y eligen "Animations":
.
.
Si apenas lo acaban de abrir les aparecerá algo como "Waiting for an animation", simplemente recarguen la página (con esta sección abierta) y automáticamente les registrará la animación que hayan hecho:
.
!Drebugging
.
Aquí también pueden jugar con los controles de sus animaciones 👀👇:
.
Recursos
Resumen
En esta herramienta podemos encontrar diferentes tipos de herramientas para trabajar en paralelo con nuestro código de una manera muy eficiente.
Algunas características en la cual nos puede servir son:
- Accesibilidad web
- Performance
- Renderizare
Para hacer uso de este servicio, deberemos abrir nuestro inspector.
Darle en los tres puntos > More Tools > Rendering > Frame Rendering Stats
Una vez hayamos seguido la ruta, nos aparecerá una pequeña ventana para poder ver la cantidad de frames que pasan en un solo segundo, también nos indica el tema de la memoria y la GPU 📢.
Ahora, si nos vamos a la pestaña que dice Performance 🎯, nos permitirá grabar nuestra animación para poder analizarla, con 10 seg estaría perfecto, nos mostraría la siguiente ventana.
Con ello, podremos analizar, gracias a un diagrama al final, las distintas capas por las que pasa el renderizado explicado en la articlase anterior. También podremos analizarlo de acuerdo a fracciones de tiempo de nuestra animación grabada ✨.
Nos vemos en la siguiente articlase 💚.
Contribución creada con los aportes de: Angel David Osorio Leyva.
