Elements & Network Panels

[00:00:00]
>> Hello, I mean this course is made for anybody but who I think I have content in this course for types of people that I think will get the most out of it. So I think anybody with little to no experience using Chrome DevTools, I hope to be able to walk you through each panel, what they do what they're good for, all that stuff.

[00:00:18]
Probably when I pull people the most common group that I get are people who have used the Network and the Console panel before. They console log stuff, they've checked it or they've looked at the network overview and they have seen what comes in. But they've really never clicked on any of the other panels before.

[00:00:34]
Maybe they clicked on it and it seemed overwhelming so they clicked away from it. So I'm hoping this will be a really nice introduction to the rest of those panels as well as learning a lot more about network and console. And the third group is people that are comfortable with the panels, but working to learn some tips and tricks.

[00:00:50]
One thing I always love, I love keyboard shortcuts, I love experiments, I love little known things, little things that I pick up along the way. So all my workshops that I do, I try to fill with as many little tips and tricks sections as possible. Cuz I find them just really fun and they kinda help me speed up.

[00:01:08]
All right, so now we'll move into the next lesson, which is what can the DevTools do? And so this lesson really we're just gonna go through each one. And we're gonna start playing around with them on a very high level, but just seeing some actual stuff that we can do with the DevTools.

[00:01:24]
And then we'll get down into the course format for the rest of the course afterwards. So I kinda have two things I wanna point out before we go into it. One is a little bit about not feeling overwhelmed with stuff. I find a lot of times when I sit through workshops, there's so much incredible information.

[00:01:42]
And sometimes I start getting a little bit stressed that I'm not gonna be able to retain all of it, right? I'm like, I gotta remember that, and that, and that, and that. So if I were to give you advice, I would say that I think it's more important to know what they can do, then how they can do it.

[00:01:57]
Cuz if you know what they can do, you can come back to this Frontend Masters course, or you can look at the Docs or you can even just look at the DevTools and try to figure it out for yourself. So if I were to ask for one big takeaway, it would be only just try to remember I've seen DevTools can do this really cool CPU thing now I know exactly how to read a flame graph, right?

[00:02:14]
Those are kind of differences. And the other one, which is something we were talking about a little bit earlier, is that the Chrome extensions like plugins that you add to your browser can and often do mess with DevTools data because they can and often do mess with how you actually render websites.

[00:02:31]
And this can lead to really inaccurate reporting. And this has bitten me a lot of times at work before. So my suggestion is, if you're doing something important, like you're auditing a customer's website, or you're trying to find if there's a memory leak on your page, I would either go ahead and disable all of your extensions, which you can do up at this window extensions tab.

[00:02:52]
Or just open a new incognito window for the site that you're viewing, incognito windows by default have the extensions turned off. So I think that's always a good tip because there's a lot of stuff going on with these Chrome plugins that you might see new scripts being added to the DOM.

[00:03:08]
You might see network requests being rejected or new network requests, all sorts of stuff that can be really tricky to figure out why it's happening. And it's often just a Chrome extension that you have. Awesome. All right, so let's begin with walking through the panels. So I'm gonna go ahead and I'm gonna open the DevTools.

[00:03:26]
And we're gonna kinda go down this little list of high level things, and we'll just play with a little example of them so we can kind of see them visually happen. So the first panel is the elements panel. And I guess actually, before I go into each panel, it should be worth noting that these tabs can be dragged and dropped, and they persist in whatever order they're in.

[00:03:45]
So if you see yours in a different order than mine, it's probably just because I've dragged mine around, nothing to worry about. You can drag these around until whatever order you want. But on the website is the order that I'm gonna be going through them in. Cool, so the Elements panel.

[00:03:59]
So again, you're able to play with all the HTML and CSS. I find it's really interesting when in doubt, try double clicking something cuz it's really interesting what you can interact with here. So for example, some things might be more obvious like we can go ahead and take the body element here, and I'll click on it.

[00:04:17]
And we can kind of scroll through all the CSS that applies to it. And so, we could do things like you can see the background color is gray. So I could change the background color to red and in real time the background of the website will update or purple, something like that.

[00:04:32]
You can also change the actual property though. So, instead of background color, you could change it to color entirely. And now you'll see this is getting crossed out because there's two colors. But I would say always try double clicking on stuff. You can even double click on the selector itself.

[00:04:50]
So if we set this back to background color, and I'll go through this auto select here, and that's purple, we could change this from body to div, something like that. And now you see the body has gone back to being its default color but every div on my site is now purple.

[00:05:05]
And so there's a lot of different stuff that you can double click on. Another one that surprises me the first time was that if you take an element over here, like let's say this h1, let me scroll up a little bit so we can view it together. This is this title element that says lesson 2 here.

[00:05:19]
You can even double click on the element itself. And so you can change it from an h1 into an h2. So there's two cool things here, one that you can edit the HTML. But two, if you notice over here, I know it's quite subtle, but If you change an opening tag, Chrome DevTools will automatically change the closing tag for you.

[00:05:36]
So you can just change the opening to an h2 and hit Enter and there we go, it gets smaller. So I'll change this back to an h1, and we'll scroll back down to the lesson. You can also change classes and IDs. Again, the thing that might be more obvious you can see here we have an article with ID of main.

[00:05:53]
The thing that might be more obvious is that we can change the ID from main to app or something like that. And you can see that explodes a lot of the CSS cuz I was using main as a selector. So I'm gonna go ahead and set it back to main.

[00:06:04]
But the thing that might be less obvious is that you can actually double click on the ID portion itself and change it to maybe a class name of main instead, which still breaks because my CSS is looking for an ID. So pretty much everything in here is double clickable, which is really cool.

[00:06:20]
You can also do things like, we saw that you can update these styles. But you can also do a lot of cool things for example, you can add a brand new style so we can click on this plus sign over here. This is on the right sidebar. And we can create a new style rule.

[00:06:38]
And so, if we had one, we wanted to be more specific than, ID of main, we could do the default one is article of main. And so you can see whichever thing you've clicked on when you click new style, it kinda tries to pull a very specific selector for you.

[00:06:52]
But you can put anything you want in here, like class of foo or something like that. These are also drag and droppable. So if you grab on to one of these like the h3, you can move it above the h1. And that will see back up here my course is now out of order.

[00:07:07]
The h1 down here and the h3 over here. Yeah, so I finally have done like a really good job of making this page, sort of like Apple does with their products where it's pretty intuitive or like the thing you'd wanna do. I would just give it a try.

[00:07:20]
[LAUGH] Always give it a try if you wanna make a new selector, drag stuff around, move it anything like that. Cool, and we'll get into a bunch more stuff cuz the elements tab can do amazing things later, but that's kind of the high level view. The Network tab.

[00:07:34]
So this one, the basic idea is if you go to the network tab and then you refresh your page when you're on it, the probably most common thing that we do and let me hide a bunch of this other stuff for now, is we look at the stack of all requests sent.

[00:07:49]
And so this is pretty cool. It's basically if you think about how a webpage works, right? You hit the server and the server always gives you an index.html, right? Or whatever, a file name.html. It's always the beginning, right? Because HTML is what we need for the very first request.

[00:08:04]
So always see the top one here being an HTML or they call it document type over here. And if you click on it, you can actually see what the response is. I do have inline styles which might be a little bit confusing, but this is an HTML file.

[00:08:18]
And then what it will do is it'll walk this file and it's looking for any references to external resources, right? So when we do HTML, we often put links to CSS or script tags to JavaScript. Those are two very common things we do. We also put image tags, right?

[00:08:35]
And so as it's walking this, it'll say every time it's like, you need a CSS file, it'll go out and it'll fetch that. And so you can kinda see the network sort of works that way where it fetches the document, it reads through it, eventually it sees that I'm linking to a script.

[00:08:48]
So it goes out and fetches that script. This is called prism.js I use it for my code snippet styling. And then it'll keep reading and keep reading and then eventually it gets to a font tag. I use a custom font in here, so it goes out and fetches that.

[00:09:03]
So yeah, this is basically in order every request that was sent, and a bunch of cool information about it, like the http status, who initiated it, what type it is, how big it is, how long it took all sorts of great stuff. And we'll get into some really cool ways that you can actually diagnose a lot of really cool things including server issues, all from the network panel the DevTools when we cover that in the network section.

[00:09:29]
So yeah, you can measure all sorts of page load stuff, so you can look at how long each file took. But you can also look down here at these really important events. So when we use a tool like Google's Lighthouse, which we'll cover later or web page test, any sort of tool to measure the speed of our website.

[00:09:45]
The two events that it's always looking for like when did DOMContentLoaded fire and when did Onload fire. And so those are both built right into the DevTools here where you can see when they fired. You can also watch your site load in real time. This is like a lesser known thing that they offer.

[00:10:03]
So if you click this setting cog up here, not the top one for all Devtools, but this one over here for network settings you can do capture screenshots. And then if you refresh again with capture screenshots, you can actually see when we audit sites later we will actually be able to watch the HTML come in unstyled, and then an image load and then a font come in and restyle everything.

[00:10:26]
So we'll actually be able to see kind of all that stuff happen in real time. So these are the screenshots of the site loading. And then we're able to inspect request and response data. So when you're working with JavaScript, and especially when you're working with API's, so if you're at work or if you're doing a side project and working with some API especially when it's not working, they'll often ask for data about the headers sent either by the API or to the API.

[00:10:53]
And so if we take like this request for prism.js, and instead of looking at the response, I'm gonna make this a little taller. We go over here and we look at the headers, we can get a lot of information from it, so you can see what response headers were sent down from the server.

[00:11:07]
And you can see what headers you sent in your fact requests. These are gonna be the default ones, cuz it's just a script source. But this comes in really handy where oftentimes at a job your service will have some kind of request ID, some way of identifying it.

[00:11:22]
And the service team will often ask you for that ID, because they wanna be able to look it up in their logs and see what went wrong, something like that. So that's a really common example I face where I say, hey, this user status API is broken. And they're like, well, can you give me an example request and I give it to them.

[00:11:38]
And they're like, okay, well, can you give me your request ID. So then I come into the DevTools, I refresh and I look for the request ID header. So that happens a lot.