Debugging: Inspecting Our Animations

Learn how to use Chrome and Firefox's devtools to inspect and debug 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.


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.

Get hands-on with 1200+ tech skills courses.