Lighthouse Reports & Device Simulation

[00:00:00]
>> Jon kuperman: And then the last one Lighthouse, we will play extensively with this today, but it is a full audit, so you can do Kind of the important ones are you can simulate mobile or desktop devices? You can simulate any number of these four categories, which are performance, accessibility, best practices, and SEO, and you can have some different modes like do a audit of this time span.

[00:00:21]
So let's say you have a game, you start it, do something in the game, end it. Or you could just do kind of like when you get navigated to the page, or you could do a current snapshot of where things are at right now. So with any one of these, it'll go out, it'll do a bunch of stuff and it'll load it for you.

[00:00:34]
We will have a pretty significant play with it later, so I'm not gonna spend too much time on it now, and then a couple of last things to just know is you can simulate your viewport devices. So you can do like a responsive app, you can see what your site looks like on an iPhone, m'I see all sorts of things like this.

[00:00:50]
Additionally, you can do network throttling so you can say, okay, well, what does it look like on an iPhone? I see and you can do mid tier mobile, low end mobile, so I can do low end mobile and then I can refresh the page, and I can kind of see here, what my app will look like on a low end mobile iPhone see, so that's quite cool.

[00:01:07]
Not the most exciting 'cause it's just a static HTML page, but you could imagine if it was doing a bunch of asynchronous stuff, that it would look quite different here. Another thing is nice is this helper arrow, so if you're trying to inspect a certain element, but you're having a hard time doing it.

[00:01:21]
When you right click on an element and you click inspect, it will do its best to open the elements tab selected on that element. That's not always possible if things are really fine grained, so another way is going kind of reverse order. You can click on the arrow and then you can kind of hover around until you get on the exact element that you want, click on that and it'll bring it in here as well.

[00:01:42]
Cool, I always go back and forth on, if you are a native developer, there's some really great ways that you can hook up the Chrome Dev Tools to a native Android app. I don't cover it in this course, but I do link to a whole article on how to set that up here.