Debugging: Inspecting Our Animations

Note: Chrome has the “Animation Inspector” option under the “More Tools” submenu option. Firefox, on the other hand, has the “Animation Inspector” under the “Inspector” option, which is under the “Animations” tab.

Chrome

Note: Chrome only supports CSS animations, CSS transitions, and Web Animations. You wouldn’t be able to use this if you were using requestAnimationFrame for your animation.

Trigger our animations while having the “Animations” tab of the devtools open. Triggering the animations should add blocks of animation groups to the top of the “Animations” tab.

Click on the block to open up a more detailed view of the actual animations that are being executed as shown in the image.