Performance, Console, & Security Panels

[00:00:00]
>> All right, performance. So, I [LAUGH] had sent out a tweet a while ago about what people would love to learn more about web dev tools and like pretty much across the board I got that people are scared of the performance tab. That's like a very [LAUGH] common response that I found from people.

[00:00:17]
But it's really not that scary, but it is very, very powerful. For a little bit of context, it used to be two different tabs. They've kind of combined into one, and it has a lot of data. And so, the kind of high level view of how to use this is you go to the Performance tab, you click on this record button.

[00:00:33]
You interact with the site, doing anything you want, and then you click stop. Some top level advice is to keep your recordings as small as possible so they keep you from being overwhelmed with like ten seconds worth of data. So, I usually, if I'm nervous about like filling in a form, I'll click Record, fill in the form quickly and click stop.

[00:00:53]
Try to keep it contained as much as possible. You can also deselect things depending on what you're looking at. So, right now I have memory showing down in this section. Let's say I'm not concerned with memory right now, I can just hide it. I also have the same screenshots from the Network tab, which can be really useful.

[00:01:08]
You're seeing how your JavaScript causes stuff to render, but if you're not looking for it at the time, you can just deselect it. And so, what you'll kind of be left with here is a little bit of showing how the website painted itself over time. So, this is your frames per second across the very top.

[00:01:24]
And this is the CPU usage across the bottom. And then, you'll see all these different frames down here. So, you can see almost everything is gonna happen in the main thread. But you can see stuff like when it's rasterizing, when it's using the GPU, all those different things.

[00:01:38]
We'll have a full lesson on performance auditing and stuff like that. But the basic idea is you hit Record, you do something that you're worried about, and then you hit Stop. And you can come in here and you can look for like, is there page jank? Like is it lagging?

[00:01:52]
What's the main thread doing? How busy is it? What's the memory usage? Or what's my CPU usage? Is it getting too high? All sorts of things like that. I think it's best to come in here with a specific question in mind, that also helps reduce how overwhelming it can be.

[00:02:06]
So, it'd be like, I really wanna know if I have a memory leak. That's what I care about. So, you can turn on the memory, you can do your thing and you can look for a memory leak and we'll do that in the appropriate section too. Console, probably the most popular one.

[00:02:22]
It's really cool, it's a JavaScript grepl. So, you can type stuff like console.log('hi'), and it'll type hi. You could do var foo = 'foo', and it'll save that. And then later, you can do foo. That's pretty straightforward. Anytime you put a console log in your code, it'll log out here.

[00:02:42]
But there's also some really other cool things you can do. Like for an example, you can go into the elements tab, and you can find an element like let's say this article, you can click on it. Then you go back into the console tab and you can do dollar sign zero.

[00:02:55]
And dollar sign zero is a shortcode for whatever I last clicked on in the elements tab. So, if you hit enter, you can see it brings this article into the console. So, now if I wanted to manipulate it, like I could do, addEventListener, click or something like that.

[00:03:12]
You can take an element from the elements tab, you can bring it into the console, you can mess with it there, which is pretty cool. All right, next is the Security tab. Again, this one's pretty straightforward. It just gives you an overview on the security for your page.

[00:03:25]
So, it is the de facto standard these days that all sites should load over HTTPS. There's all these really cool resources, like Let's Encrypt, which gives you Just free SSL certificates. And so if you go to any website and you click any open dev tools and click on the security, it'll give you an overview.

[00:03:43]
And the reason that there's an overview is one, it'll tell you if the actual index dot HTML file, like the main request was served over HTTPS. But it'll also tell you if any subsequent requests were served over HTTP, which can be insecure. So, you could have a fully secure site, and then you add like an embed for a video or something like that.

[00:04:01]
And that might be over HTTP, which still leaves you vulnerable. So this is cool. Basically, on the high level, you want to open it and you want to see green. That's what you want. If you open it and you see green, everything's good. If you see any orange or red, it'll give you appropriate instructions for why it's doing that.

[00:04:17]
It also lets you view the SSL certificate itself if you have any reason to be viewing that.