Lighthouse, Device Emulation, & Element Finder

[00:00:00]
>> Then we'll cover the Lighthouse tab. This one's great. This has been kind of a cool story to watch. So years ago, Chrome came out with this idea of Lighthouse. It used to have an audit tab, which kind of did similar things that came out of this idea of Lighthouse.

[00:00:13]
It's like fully open source. It's contributed to by all these great people and it's just cool rules for, your site should have a first paint in this much time. Or if you say it's a progressive web app, it should work offline. Or if it should be accessible for people with disabilities or you should be taking advantage of Google's SEO recommendations, all this stuff.

[00:00:36]
So they came out with this idea of Lighthouse and it used to live on its own website. And so in my last time teaching this course, I was use the audit if it's a local site. And if it's not a local site, go to Lighthouse and use Lighthouse.

[00:00:49]
Lighthouse is awesome. But now Lighthouse is fully integrated with the dev tools itself, which is great. So you can do it all on a local site. Just to explain what I mean by that. If you have a great site like web page test is one of the best ways of like analyzing your site, but you have to a URL and hid it, right?

[00:01:05]
So if you haven't published your app yet, you can't use that website to measure it. So the dev tools are great, cuz even like we are if you're just on a local host, you can still run it. So I haven't published yet, but I wanna know how it's doing.

[00:01:17]
So Lighthouse is this full page audits, we'll talk about all these great stuff its get. It's the place I'll always recommend starting if you're trying to gauge performance of a new app. Come here, it'll give you so much feedback before you have to dive into the weeds of network memory CPU.

[00:01:34]
And also it can do other cool things, it can emulate devices. So this little button over here to the left,, you can click it and it will give you all these different options for exact screen sizes. So for folks that do a lot of front-end work and design, you can see exactly what your site will look like on a pixel two or something like that.

[00:01:52]
And more than just shrinking your screen, this will actually send the appropriate headers. So if you have a server that reads in the request header and says, it's a mobile device, go here. Otherwise, send this. This will convince you that it is a mobile device. You can zoom in and you can actually test out.

[00:02:08]
I hope you can see, but my mouse cursor is turned into a little touch circle. And so you can test out touch events too, which is which is really nice. Click that to go back and the last thing is this nice little element Finder. I use this a lot and I see people not using this a lot.

[00:02:24]
So if you're looking for a specific element like this emoji or something like that rather than going into elements and trying to like drill down into it this way, you can click on this and then you can start moving around and it'll hover on different things. And whatever your click on, whatever it's hovering, it'll focus that.

[00:02:40]
So I click on elements and it clicks it in here, and I can find that emoji really quickly. At the end, we'll go into a bunch of different settings and some experiments and some really cool stuff that you can do over here. But that's kind of the cover for the most part.

[00:02:53]
The other thing that's important is you can choose where it's docked. So you can go to the right, to the left or pop it out. And one thing that's kind of interesting when we did the network tab, right, we did screenshots, but the screenshots you can see are really minor.

[00:03:07]
And the reason is since we have the dev tools open here, Chrome only has to render this exposed part of the screen. So you won't get a full screenshot of your app, unless you go here. Pop them out and then you refresh. And now that Chrome actually has to render the full site, you'll get full size screenshots.

[00:03:25]
So that's kind of the high-level view of each panel. We're gonna be spending a lot of time in each one. But just so when you see them, you can be, I know what that one's for. That one does memory stuff for that one checks HTTPS or that was the step through debugger, those kinds of things.