This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Screenshots" Lesson
[00:00:00]
>> Jon Kuperman: The last thing that I just wanna kinda show is some cool stuff with the DevTools UI. So some of my favorite things that you can do here is you can do screen shots, which is really neat. So if we do refresh with this capture screen shots enabled, what we'll start seeing, this is a funny gotcha too.
[00:00:18] So like we think of the DevTools as being like an overlay, we think we have our screen then the DevTools kind of sits on top of it. But again in reality, why would Chrome render the stuff behind it if you can't see it. So when you have the DevTools docked to the side or the bottom and you do screenshots, you'll start getting these kind of weird screenshots which are like wait a minute, why is it only that little sliver of the paint?
[00:00:42] It's just because it's not actually rendering this stuff. So when you do screenshots, it's usually the best practice to just pop the DevTools out here. Unlock to a separate window and then refresh again. So now as we're refreshing, what it's gonna show and this site's not terribly exciting, but it's gonna show every repaint that happens and what it looked like at that state in time.
[00:01:02] So you can kinda watch as the resources come in, how the screen paints itself. So for example, if we go maybe the Frontend Masters, which is a real estate with a lot of cool stuff going on and we have the screenshots turned on, you have to wait til it's all finished here.
[00:01:20]
>> Speaker 2: It's loading the live stream player.
>> Jon Kuperman: Yeah, sorry, I see me. Yeah, if we go to this, you'll start seeing this really cool kind of story of how. Let's see, let's just wait for these.
>> Speaker 2: Maybe you do frontendmasters.com/courses, because it's not loading up there.
>> Jon Kuperman: Perfect.
[00:01:44]
>> Jon Kuperman: So what you'll start seeing is how the web page actually loads in. This is often like too quickly for us to see, but it's important. So we can see the first thing that happens is the document comes and the CSS must be there, cuz it does this layout.
[00:01:55] All the widths and heights, and things like that are good. We can also see some of the HTML that's not dynamic. So this stuff is this type to search is static whereas a lot of the information is dynamic. So then the next thing to load in is all this text content gets there.
[00:02:08] It's likely that the images that go here have been triggered. They're being requested, but they haven't come through yet. So this next context comes in and it's great. We keep going and a logo pops in. We can see that logo comes in. Keep going again, I'm not sure what repaint happened there.
[00:02:23] And now something happened here like maybe a break-point got hit or something like that or maybe it's something going on with the images. Yeah, so I see. So these are like these boxed images, but there is some transition or maybe JavaScript or something like that is applying it.
[00:02:37] So that as the logos come in, they kind of slide in nicely behind. We can see the top logo, then these other ones are fetching. Those are probably just coming in, in any order like we have these images in the markup or something like that. Anyway, so you can see really and then you can see these bottom two appear and then the site this kind of animates in.
[00:02:52] So those are the repaints. So yeah, one really cool thing about using the screenshots is to kind of develop this empathy for how your site loads on slower connections. Another thing that's really important as you kinda get into these microperformance improvements, it's like we're gonna talk next about audits.
[00:03:08] Those are macro, too many images, they're too big. These are micro ones. You might wanna investigate how your content loads. Because for example, if you block all the readable text until an image is done loading, you could be making people sit there and wait forever. Whereas with Frontened Masters, it's really cool that even on a really terrible connection, you're pretty much right away able to get text and see what's clickable.
[00:03:30] As the site loads, it instantly even if that takes five minutes for those images to come in, I can start scrolling through the list and clicking on any lessons that I wanna learn. Those kind of things. Yeah, Josh, you had a question?
>> Josh: Yeah, I was just wondering how you triggered the playback of the sequence.
[00:03:45]
>> Jon Kuperman: Absolutely. So once the screenshots load in, you can double-click on one to zoom it in. So from network, made sure screenshots are attached and then I did a refresh. And once that refresh completes, these screenshots should populate across here and then you double-click on it and then you can use the right and left arrows to see each frame.
[00:04:03] Yeah.
>> Josh: And also I'll say that the reason why at 855 milliseconds, you're seeing any styles at all is because we inline the critical CSS.
>> Jon Kuperman: That's really cool.
>> Josh: Into the initial reclass.
>> Jon Kuperman: That's great.
>> Josh: So we bundle in the just HTML plus, but the text should actually be readable right here as well and that's a bit frustrating.
[00:04:26]
>> Jon Kuperman: These happen in between 100 milliseconds, it's possible. It's just that paint is taking that long. 100 milliseconds is pretty short. But yeah, we could look deeper into it. It'd be really cool, but it is cool. That's a great point. That's cool to know why we are seeing this.
[00:04:38]
>> Josh: It's like you get kinda the branding colors and then you get kind of the basics?
>> Jon Kuperman: Yeah, and the shape too. Because another thing for people, I don't know if you've ever been on a slow connection. And as the websites loading, it's moving on you. Cuz CSS is coming in or images are pushing down or whatever.
[00:04:50] The fact that if carves out all the space, it's going to need is really great too.
>> Josh: Past few years, Blood Pact to a bundle the inline assets.
>> Jon Kuperman: That's awesome.
>> Josh: Like the critical and then we have a package that loads-
>> Jon Kuperman: Seeing the results of it here is really cool.
[00:05:02]
>> Speaker 2: Can you export those image files? Can you save those off?
>> Jon Kuperman: I'm not sure, so you can export the network data. As far as image files, I'm not sure. I mean, you can probably, you'd have to screenshot them. I don't think they actually come with any kind of export, but that is one of my favorite things to kinda take a look at.
[00:05:20] All these views are deselectable, so you can hide a few of them if you wanted. That's what these buttons are here for like controlling the view. This one is controlling that filter at the top. So this is another cool thing you can do, so you can filter by type.
[00:05:34] So you can be like I just wanna see JavaScript files and then let me hide this. So here's the JavaScript files. And so what about CSS and we don't have them. And then what about a combination, you can hold shift-ctrl or cmd and you can see that. You can also do really cool things like this filter here is very smart.
[00:05:53] So you can do things like the word tracker and we can search it. You can also do larger than and 200 pixels or something like that. 200, 100, do we have the images? The images haven't come through. Anyway, you can do a bunch of cool things. You can do a larger than and then you can pass in some amount of pixels or something like that.
[00:06:15] And so you can start filtering your results by that stuff, then you can clear it any time and then a refresh will always take it back off again. You can also test offline mode for anybody building progressive web apps that have a service worker, so you can trigger offline and then you can refresh the site again and then we'll see that it doesn't.
[00:06:33] But if you had a site that had a service worker loaded, you would see it kick in there. Another thing to keep in mind is you can enable and disable cache. So if you're caching your files and you wanna see what it's like for a user to hit the screen for the first time, disable it and then the last thing you can do with almost all of these panels is preserve log.
[00:06:53] So if we go back to thinking about the console, for example, and we console log something out, but it happens. I've seen this before where you have push state to move around the app, so it triggers a new page load. And so you're like when I click on it, I get an error and then the new page loads.
[00:07:10] But if the error is gone before you can even see it. I think that's happened to though, a lot of us. So you can click preserve log and then click on the button. And even though the page load happens, it won't clear the console for you. Same with network, it wouldn't clear the network.
[00:07:21] It would just keep adding assets to it.