Afficher les outils pour les développeurs
Cette astuce est valable pour tous les navigateurs web.
Tout d’abord, nous afficherons les « Outils pour les développeurs » dans le navigateur Chrome. Nous avons plusieurs options disponibles. Tout d’abord, nous pouvons effectuer un clic droit puis sélectionner « Inspecter » en bas du menu. Une autre option consiste à utiliser le raccourci « Ctrl + Maj + I » ou encore F12.
Ouvrir le panneau de la console
Une fois cela fait, nous irons dans l’onglet Console, où nous avons deux autres options pour afficher la deuxième fenêtre de l’onglet Console. Nous pouvons soit appuyer sur la touche « Échap » ou cliquer sur les trois petits points en haut à droite de l’onglet Console, puis sélectionner « Afficher le panneau de la console ».
Afficher le nouvel onglet animation
Dans ce nouvel onglet, nous cliquerons sur les trois petits points situés à gauche et sélectionnerons « Animations » pour l’ajouter à cet onglet.
À l’intérieur, nous pouvons analyser les animations de notre site uniquement si l’onglet « Animations » est ouvert et actif. Par exemple, si nous avons un changement de couleur via le « hover », il suffit d’effectuer l’action normalement pour l’enregistrer et l’analyser. Nous pouvons mettre en pause l’animation, naviguer le long de la timeline en utilisant la barre dédiée, ou même ralentir l’animation à 25% ou 10% de sa vitesse normale pour une meilleure analyse.