No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Debugging de animaciones con DevTools

10/13
Recursos

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 馃摙.

Ver cantidad de frames.jpeg

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.

Performance.jpeg

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.

Aportes 4

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淢ore Tools鈥 y eligen 鈥淎nimations鈥:
.

.
Si apenas lo acaban de abrir les aparecer谩 algo como 鈥淲aiting for an animation鈥, simplemente recarguen la p谩gina (con esta secci贸n abierta) y autom谩ticamente les registrar谩 la animaci贸n que hayan hecho:
.

.
Aqu铆 tambi茅n pueden jugar con los controles de sus animaciones 馃憖馃憞:
.

El poder de Dev Tools 馃槷

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

.

Y otros muchos mas 馃槂
.
Te recomiendo este curso dictado por nuestro profe Diego donde explica varios de estos temas a detalle. 馃憞
Curso de Debugging con Chrome DevTools

Quiero hacer una aclaraci贸n importante, la profesora dice que lo ideal es que nuestras animaciones corran a 60FPS para que se vean bien y darle buena experiencia de navegaci贸n al usuario.
Esto no es exactamente cierto.

Si bien el objetivo de esta clase es lograr un buen rendimiento es decir m谩s FPS, lograr una cantidad alta es beneficiosa pero no del todo necesario, es decir esto es opcional. Esto es porque nuestros ojos no perciben la diferencia entre digamos, 30 y 60FPS a menos que te pongan dos pantallas mostrando la misma animaci贸n en diferentes framerates ah铆 si se nota la diferencia.
Esto tambi茅n lo digo porque la televisi贸n y el cine tienen formatos que van de 24FPS a 30FPS y rara vez exceden estos valores porque estos medios se ven bien as铆, igual pasa con las p谩ginas web. Dudo que la profesora Teff o cualquiera que est茅 leyendo esto sea capaz de notar la diferencia entre una animaci贸n fluyendo a 30FPS y otra a 60FPS, a menos que tengas el ojo entrenado para ver en framerates altos. Incluso si se logran m谩s de 60FPS no sirve de nada si la pantalla desde donde el usuario est谩 viendo tu web es de 60Hz, as铆 que no importa que optimizes tu p谩gina para que las animaciones corran a 120FPS, al usuario promedio le basta con sus 30FPS y siempre y cuando no baje de esta cifra las p谩ginas se ver谩n bien.

馃 Mucho cuidado con el rendimiento como tal de tu web. Todas las computadoras tienen un rendimiento diferente, por ejemplo la m铆a es muy poderosa, lo que hace que tenga incluso m谩s de 60 FPS gracias a la aceleraci贸n por Hardware. Si le pongo tantas animaciones que empieza a rozar los 60 fps entonces en otras computadoras no tan poderosas, no ir谩 a 60 fps.
馃榿 Siempre prueba tus webs en otros dispositivos y ve que todo est茅 realmente optimizado.