Wrapping Up

[00:00:00]
>> Two things that are sort of outside scope for this course I didn't want to go too long, but I think are very cool. Puppeteer for all those that don't know Google's chrome can be called from node in a headless way. So folks that do like, what's it called end to end tests on your websites.

[00:00:18]
So, maybe you'll have one actually opens a tab logs in does stuff like that? Puppeteer is a great tool for that. There's also some other tools like WebDriver, and things like that. But when you think about the performance API that we covered earlier, you can do some really cool things with puppeteer WebDriver, where you could have it log in and record some metrics and save those metrics or I like to do like CI workflows.

[00:00:41]
I always have this like philosophy that If you can't lint it, test and make a CI rule for it, you shouldn't bother somebody on their code review about it. You know, it's like let the computer do that. Don't you change? So, one thing that I like to do is I have a few I called my performance budget.

[00:00:58]
I think Alex Russell from Chrome, maybe coined that term. So, I have my performance budget. And we use puppeteer, puppeteer logs of performance API. If they're greater than certain numbers, it flags the PR. So when you go to put a PR up, things are a little bit too slow.

[00:01:13]
And then it's not a person yelling at you. It's just a simple rule there. So, there's a lot that you can do there, combining the performance API with Puppeteer. Similarly with Lighthouse, they have a CI that you can call from node as well. So, you can do a very similar thing where you could say, on every PR spin up the website, hit it with Lighthouse, and if it gets less than 100 flag PR, you could do something like that, which is very cool.

[00:01:36]
I think that would be a little bit more going into like Jenkins or CI jobs and that's a little outside of scope, but it's just something cool to think about. Cool. So, basically the last thing that I just wanted to talk about kind of in Lieu of Puppeteer and lighthouse.

[00:01:51]
CI are just some other cool like parting notes because we've kind of gotten through all the heavy stuff. One thing that's really cool our Chrome Dev Tools experiments, so if we right click and we go into inspect and then we go to the settings cog up here. You'll see a lot of different stuff which is cool that you can kind of control the display.

[00:02:09]
You can do light mode, dark mode, you can control how the panels are defaulted laid out. Remember in the sources debugging, I said you could right click and you could black box a script if you didn't want it seen. If you want to remove one that you've black box, you can come here and do so, the devices over here is where you can emulate different devices.

[00:02:30]
So you got all sorts of cool defaults that you can set, but one that I wanted to bring attention to is experiments. So, before things launch, they always come out here in this experiments tab. And so you can take a look through there's always really neat stuff in here, It's like use as is enable at your own risk [LAUGH] all this stuff so they're not documented.

[00:02:52]
A lot of times you have to poke around to see where they even are, you'll enable somebody to get on the memory tab. No is on the performance. I see it now. But there's always a really cool stuff. Some of this stuff doesn't make it in to Dev tools.

[00:03:06]
But this is really neat stuff that you can kinda play around with and see. There's another little one that I wanted to show which is, if we go to the dot dot dot and show the console drawer, and then we go to its dot, dot, dot, there's a bunch of little stuff that you can see here.

[00:03:25]
And so one thing that I always like to do is, you can like click on like rendering for an example. And there's all this endless cool things that you can do, but you can do something like paint flashing. That's one of my favorite things to do. Then anytime Chrome is repainting like as I hover over things, it'll show you in this cool green outline.

[00:03:49]
And so this could be really cool. You have a big react app and it's going kinda slow. Sometimes it might be repainting the whole site just when you're trying to change a really small thing. And this would be a really great way to figure that out. So you just go into it.

[00:04:03]
Dev Tools, open the console drawer and then dot dot dot here and you can see all sorts of just really neat stuff. Yeah, there's all sorts of amazing things that you can add. But each one of them each one of these just has a list of checkbox. Here's another one that I really like.

[00:04:18]
This frame rendering stats. It just shows the frames per second as I scroll around and the performance of it, things like that you can see how much GPU memory it's using. So, I can just like very high level, get an idea of cool stuff like that. So, those are probably the two I use most often paint flashing and the frame rendering stats, but just be aware that there's a whole bunch of cool little extra things that you can add.

[00:04:40]
You know, to the bottom drawer as well. The other thing we got a lot of good questions earlier in the workshop about, does this work with React with Angular? So the answer is always going to be yes. Like for example, if you do an HTML break point, it will show you what JavaScript caused, but we talked about, it's going to be very deep inside the react reconcile.

[00:05:03]
Whatever. So, I really recommend checking out these, the separate Dev Tools. So React has one, Vue has one, Angular has one. So, these are Chrome extensions that you can use and there. They're so good like I use this just every day at work so for React I this is not a React focused class by any means, but you can instead of you have your regular elements tab.

[00:05:26]
But then you get a components tab and in that it shows the actual whatever you named your react components over here, and shows what props they get what hooks they have, like all this like amazing stuff. So, while the answer is always yes, you can use the elements and the elements, break point, even if it's a react app.

[00:05:44]
The longer answer is, but look how cool it is. If you use the specific framework Dev Tools you can get so much information. And then we looked at the Performance Tab, it has its own what they call profile. It's a specific react Performance Tab. It works the same way a recording and you stop it, but it'll specifically show you this is a heavy render and it's caused by this hook, it speaks the language a lot better.

[00:06:10]
So, if you're working on a big angular app or react app whatever it is check out their Dev Tools, because they're I'm this just seems to me so much time every day. I worked on a project ones back in the day that was too big. For the react Dev Tools they'd crash and it was such a hit to my productivity where I was man.

[00:06:28]
I would open it every day and they'd crash every day. So, they've fixed that since then. But these are a really great way to kinda work around that. Awesome, and my very last lesson is just kinda where to go from here. Another huge shout out, I think I'll be able to find it on when it's scheduled for.

[00:06:47]
Because unfortunately, I forgot, but there's an advanced web tools course coming on May 17th. From humor, he's been like for years we've been I don't know him, but I've known him as the other Dev Tools content creator in this space. There's the two of us. So, I'm really pumped that he's gonna be coming on.

[00:07:06]
He's really in depth performance audits and all these like real world cases. He's just such an expert. So that advanced class is going to be super cool. The official Dev Tools Doc's are always a good place to look for things. They're all linked here in the project. And then I've also linked my Twitter.

[00:07:24]
I love talking about stuff. If any of you have reached out to me in the past on stuff, I'm always geek to DM about cool Dev Tools stuff or whatever. The Chrome Dev Tools have a Twitter link as well. And then my very last shout out is there's this new initiative web dot Dev.

[00:07:37]
I'm not sure if people have heard of it. It's like this big web community. I think Google kind of owns it but a lot of open source contributions from a lot of people. It's so cool. They have all these topics, on such a playground like all this cool stuff.

[00:07:55]
Web vitals progressive web app is all free, really high level content they worked with, the framework teams when react and angular and they work with a web host teams like netlify universe, and they. They just worked with like everybody to get these extremely high quality articles out there.

[00:08:12]
So, if you're looking to learn something new, I just love this, I read new articles on it all the time. Otherwise, thank you so much. I love doing these workshops and I love meeting people and hanging out and talking about Dev Tools. So thank you very much for hanging out with me today.