This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Browser Developer Tools" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Rachel Nabors: So we've been talking about taking a look at how fast things are going in the browser. And I said, whatever your duration is, you wanna have it and then have it again. There's another option, which is that you can work in your browser. Yes, you can do this today with your developer tools.
[00:00:21] With all of your animations slowed down by default. So you'll be developing with short durations by default. Let me show you how you would do this. We're gonna use my site. Let me open up Firefox Developer Edition here.
>> Rachel Nabors: We have these options in Firefox Developer Edition and Chrome and I'm going to show you how to do them, do it in both.
[00:00:53] So here in Firefox Developer Edition I've open the developer tools using Cmd+Alt+I. Or, if you're on a Windows machine, you'd use Ctrl+Alt+I. Now let's see, we have got an animation tab right here. Boom, I'm gonna make these a little bit smaller, so that we can see a little bit better.
[00:01:15] But down here we've got the animation tab, we've got a lot of timelines, there cool. We'll check them out. But we can also set the entire playback rate to run at a quarter of what it should, and watch what happens now.
>> Rachel Nabors: It's working for the main one, but it's not working for the body.
[00:01:35] That was unexpected.
>> Rachel Nabors: Hm, I think it only works if I set it to a selected. Well that is odd, you can pause all animations, but apparently in this version, there's a bug that's not letting me slow them universally. But it's there, one day it will work as expected.
[00:02:03] Let's take a look using the Chrome dev tools.
>> Rachel Nabors: Now in Chrome's dev tools it'll probably pop up with the elements tab. If you hit escape, you will get this lovely console.
>> Rachel Nabors: And there's some animation stuff happening up here we'll talk about a little bit later. But you also have these options, these are liable to change over time.
[00:02:34] Like, you can set it to run it 100% or 10% or 25%. 25% is a sweet one. So these might not be the same ones that you're going to see in the future. Problem is, as you can see when we close the tab, the thing stop applying. That might actually be what's happening in Firefox too.
[00:02:54] So as you can see, it 100% slows down every animation from the text change, to the slide out rate, to how fast her hands are moving. And this lets us work with animations and see that there's a little slight bounce happening in this slider, which is exactly what I wanted.
[00:03:13] I wanted it have a little bouncy happy feel to it. But it's kind of hard to see that when you're running it at 100%. So, for development, I might actually use my browser, with my browser open, my browser's div tools open. I might do everything and at 25%.
[00:03:30] I'm gonna see if that's actually true over here, let me see if I can get that right.
>> Rachel Nabors: The nice thing that I like about the tools in Firefox is that you can make them run even faster. It has a little bit more options, which I appreciate. Let's see, no, it's being a little buggy today.
[00:04:03] The difficulties of using nightlies and such. Sweetness.