Animations panel: Click for time, resize for names š
Two tiny tweaks, big boost for your animation scrubbing workflow.
Iām Jecelyn Yeen, currently working on Chrome Tooling - Chrome DevTools, Puppeteer and more at Google. I tend to talk about web development, debugging & testing.
Prefer video over text? Head to the end for the video version.
Scrub through animations like a pro with these two new additions to the Animations panel in Chrome DevTools:
Click to seek: No more hunting for the tiny playhead! Simply click anywhere on the timeline header to instantly jump to that point in the animation.
Name unveiler: Tired of truncated selector names? Now you can resize the name column to reveal the full name in all its glory, making it easier to identify specific animations.
These might seem like small tweaks, but they make a big difference in your animation debugging workflow. Previously, dragging the playhead and dealing with hidden names could be a bit of a hassle.
Want to learn more about the Animations panel? Check out this handy link: goo.gle/devtools-animation.