Of the many Chrome DevTool options we have available, there is one that shouldn’t be overlooked: the Animation Inspector. This tool helps you get a better visual of your animations. It also provides some useful debugging actions, and the ability to adjust animation timing on the fly — without needing to make changes in the Element Inspector or your code editor.

In this article, we’ll cover the basics of the Chrome DevTools Animation Inspector and learn a few ways to help save time while working with animations.

The inspector is not just for developers! Designers will find it useful while collaborating with developers, researching animations for design inspiration, or as part of a design QA process.

Accessing the Animation Inspector

Once you have the devtools open (option + cmd + i on Mac), you can find the Animations tab by clicking the “Customize and Control Devtools” icon on the right side of the panel. Then go to “More tools”, then “Animations”.

It would be nice if this tab could be moved into the main tab row in dev tools, but I wasn’t able to find a way to move it. If anyone knows how, please comment!

Better Visuals

The first thing you’ll notice with the tab open is that it’s actively listening for animations on the page. Each time one occurs, a tile will appear at the top that contains specific info about the animation, or animation group, that occurred.

What’s an animation group?

The Animation Inspector predicts which animations are related based on start time (excluding delays and so on) and groups them all side-by-side. In other words, a set of animations all triggered in the same script block are grouped together, but if they’re asynchronous then they’re grouped separately (see the Chrome DevTools Animation Inspector Guide for more).

This is interesting and important, as animations can have several different properties to keep track of, especially when it comes to more complicated ones. The inspector helps us by grouping them together where applicable.

#css #front-end-development #animation #programming #chrome-dev-tools