Inspecting Elements & Styles

[00:00:00]
>> Jon Kuperman: Cool, so with that, let's jump into the first lesson where we'll be playing around together. So this is lesson 1, What can Chrome DevTools do? And for this lesson, I'm going to be using the course, so I have it running locally from that repo. If anybody has trouble with that, please let me know.

[00:00:15]
Otherwise, you can go to mastering devtools.com click on lessons and then click on what can Chrome DevTools do, and then you should be able to follow along with me there. So we'll go into lessons, we'll go into what can Chrome DevTools do. One note, which is mostly here for me, more than it's here for you, is that Chrome extensions can, and almost always do, mess with the performance of your website.

[00:00:36]
They add JavaScript, they add HTML, they have event listeners, things like this all the time. So one thing which I always try to remember, but is very difficult, is before you do any kind of serious profiling with the DevTools, do it either in incognito mode or do it with your extensions off.

[00:00:53]
Because I cannot tell you how many times I've narrowed down, finally, the thing that's causing the most page junk. And it's some password managing plugin that has nothing to do with the user. So, I will go ahead and take my own advice now and I will open an Incognito tab.

[00:01:08]
It's not 100% required, it's just really something to know because you'll often see on the network tab, you'll see extra files coming in. In the performance tab, you'll see extra call stacks, all sorts of stuff basically coming from some extensions that you have. So I'll go incognito, I have no extensions here.

[00:01:23]
Should be good to go. Okay, cool, so the first panel, the elements panel, this one hopefully, is among the more user-friendly ones. So essentially it will have the HTML rendered as Dom on the left. And so you can kind of click through and you can see, your elements and their class names or their IDs, different things like that.

[00:01:43]
And then on the right, it'll have the styles that sort of attach to them. So you could click on like the body, and then you could see the body over here has the following styles, it's background color and color. These are all editable, they're toggleable. You could turn the background color on and off.

[00:01:58]
That might be a bit hard to see. Let's see if we made it red, and then turned it on and off so they are togglable like this. And they're also editable, so as you saw before, I can make the background color anything that I'd like it to be and it will change in real time.

[00:02:13]
There's a lot of information here, so I think one of the best ways if I cover anything too quickly or skip to please raise your hand and call out. Because I hope not to, but basically, you can see kind of the styles applied. You can see the file and line number that they're coming from.

[00:02:28]
So I could go ahead and click on this, and it would take me over to the sources tab and show me where in the actual CSS this is coming from. Another really interesting thing is that, and we will cover this in the next section. But you can also from the styles tab over here, you can click on computed.

[00:02:45]
And I think the thing to know for now is that when the style engine receives multiple things that could apply to an element. It has this algorithm that it kind of applies to figure out which one should actually apply. I think the easiest example that most people know is the important tag exists.

[00:02:59]
So if you have, all divs should be blue, all div should be purple important, then important will win. But there's a lot of different things that happen here too. So if you're ever confused why a style is appearing like if you see this as purple and you were expecting it to be something else, you can kind of come over here to the computed tab.

[00:03:14]
We will cover this in more details when we do the elements panel, but it's a tab that I quite like as well as it shows you the kind of Box model. So I don't know who's heard of the box model before and CSS, but it's basically like an element has its width and height, it has padding, and then it has border, and then it has margin.

[00:03:29]
So if you were to do like, padding 50, I guess we could just, let's just jump in here. So let's take an element here and we will make a new selector for it. And so we say, okay feature details, they have a width, or they have a background of pink, right?

[00:03:45]
And they have a width of 100 pixels and a height of 100 pixels. So that was the most inner one. And then if you say they have padding of 20 pixels, that would be padding outside of the width, but inside of the border. So then, oops, 20 pixels.

[00:04:03]
Then if you said they had like a border of 10 pixels, solid black. Now you can see that you have the width of the thing, and then you have the padding, then you have the border. And then if we were to go ahead and say they also have a margin of 15 pixels, you can now see that the margin is outside of the border itself.

[00:04:19]
So you see the margin is here, the border is there. I'm hoping you can see it kind of highlights these things. So we've got the margin on the outside, then the border, then the padding, then the width and height of the actual element. And similarly, if we went over to computed we would see kind of everything that we typed here.

[00:04:34]
So width and height are 100 padding of 20, border of 10, margin of 15. That is hard to read, so I'm gonna refresh there. Cool, so you can do quite a bit here. Lots of things are interactive, for example, you can double-click into a property, like a class property.

[00:04:49]
And you can change this from main-nav to foo, and then it loses all of its main-nav selectors. So we can set main-nav back on it, and it'll appear again. At any time, you can right-click and just edit as HTML. So you can truly add a lot of things.

[00:05:04]
We can get this whole navigation item as HTML, and we could add a brand new LI, hello, something like that. And so yeah, you can kind of edit around to your heart's content. You can edit individual properties, you can edit entire tags. You can edit the whole HTML block itself, all sorts of things like that.

[00:05:21]
As we kind of already saw, you can update styles. There's quite a lot of cool stuff you can do within updating styles, like it's very easy to use the arrow keys to move things up and down. You can find anything that's a color, and you can click it, and that will open this really nice color palette where you can kind of choose, and you can see it's updating in real time.

[00:05:41]
The color palette is quite great. We will get into it later, but you can have it do all sorts of things, like pick out accessible colors to make sure that contrast is good. You can load in themes like from your website, or you can use Google's material UI theme, which is down here.

[00:05:55]
So if you're not a designer like me, you can limit yourself to just colors from Google's material design. So I can, like, kind of shop around at the blues and the orange is available, and things should still look pretty good here. You can simulate events. So if we go out here and we click on, let's say one of these nav item Li's, we can do things like, okay, well, show me what it looks like when it's hovered.

[00:06:17]
And it shows the kind of hovered state here. When it's focused, when it's active, all sorts of different things. So I do find sometimes when I pair program with people, they will miss this. And they will be looking at the UI. And then they'll really quick hover over the thing with a mouse and try to watch where it is on there.

[00:06:34]
But all of the events can be fully emulated through this, as well as any state. And so for each element, you can click on, you can be like, I wanna see what this anchor looks like when it's in a visited state. All of this is fully simulatable, emulatable.

[00:06:49]
You can add a new class to anything that you select. So I can go here and make a new class and it will give me this thing here. You can just very quickly add a new selector for whatever the item is that you're playing with. So if you wanted to mess around with some styles on this, you can click the kind of plus here, you can do a bunch of different rendering emulations, right?

[00:07:06]
So you can emulate what it would be like if the user had dark mode on, or if the user had the preferred dark scheme, or if the user had preferred light scheme. So you can kind of make sure that your website reacts accordingly. And there's a lot of other stuff that we will cover across here with break points and event listeners, all sorts of things like that.

[00:07:23]
Maybe the event listeners one we'll just cover before we move on, which is you can select any item. Select Event Listeners, and then you can go ahead and see if there's anything in particular listening on this event. So if we had like a selector in JavaScript that was like on event, handle event listener for a click, then we would see the click kind of showing up here.

[00:07:39]
But by default, since these are just native anchors, we don't have any, event listeners on there.