From the course: CSS: Animation

Unlock the full course today

Join today to access over 24,400 courses taught by industry experts.

Using browser animation inspection tools

Using browser animation inspection tools - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial Buy for my team

Using browser animation inspection tools

“

- [Instructor] Both Chrome and Firefox browsers have some very useful animation debugging tools within their developer tools. These tools can be extremely helpful both in debugging and designing your CSS animations. They let you see what's going on in the code behind any given CSS animation. Let's take a look at Firefox's tools first. I have one of the animations from earlier in this course open in my Firefox browser. To get to the animation tools, you need to open the web developer tools, which you can do from the tools menu, to browser tools and web developer tools, or you can use the keyboard shortcut. Depending on the layout of your web developer tools, you may need to go to this arrow and make sure animations is checked to be able to see it in this right-hand pane. And I'll also make mine just a little bit bigger so I can see all the sections at once. The details in this tab will only show up once an element or…

Contents