Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Website Optimization

Well done!

You have completed Website Optimization!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

The Elements Panel

6:31 with Nick Pettit

There are several panels in the DevTools, but the Elements panel is one of the most useful for front-end developers. It provides a conduit to directly interact with the DOM and styling. This makes it easy to test out and debug structural and aesthetic issues in HTML and CSS.

The panel that we're looking at here is the Elements panel. 0:00
You'll notice that says elements right here. 0:04
There's a lot of other panels and we're gonna look at each one. 0:07
There's Resources, Network, Sources, Timeline, Profiles, Audits, and Console. 0:10
In the Elements panel, on the left side here, we have the dom tree, or document 0:19
object model tree, which is basically a fancy way of saying our HTML code. 0:27
So we can go ahead and twirl out all of our different 0:33
HTML elements here, and we can see what our document looks like. 0:37
Over on the right side here, we have our CSS. 0:44
So when we click on any of our elements in 0:49
our dom we can see what the CSS looks like. 0:51
Now, when I pull up the Dev tools, if I haven't right clicked and hit 0:56
inspect element, and I've just brought them up using the Hot key or the Menu. 1:00
I can go ahead and still select elements using this little magnifying 1:06
glass tool down here at the bottom. 1:10
So if I click on the magnifying glass, you'll 1:12
see that I can hover over anything on my 1:14
web page, and it will give me a little 1:17
bit of information about it in this little tool-tip here. 1:19
So you can see how much space the element is actually taking up. 1:24
And you can also see what kind of margin and padding that element has. 1:28
And that's the orange area. 1:33
And then, in the tool tip, we can also see 1:36
the total amount of space that the element is taking up. 1:37
So, this element is 745 pixels by 111 pixels. 1:41
And we can also see what type of element it is, so this is an H1. 1:47
Down here, we have an A element, with the class.btn on it. 1:51
And over here we have an image. Now, 1:58
I'm just hovering right now, with my magnifying glass selected. 2:02
If I actually click on something, you'll see down 2:05
here that it will highlight the tool in the DOM. 2:08
So it's highlighted that H1. 2:13
And we can go ahead and open that up, and see the contents of it inside. 2:17
Now when we select an element like this. Like I said before it 2:23
will also show the CSS for that element over on the right. 2:27
So, we can go ahead and do a couple of different things here. 2:32
We can uncheck CSS properties. 2:36
And that does exactly what you would expect. 2:41
It enables and disables various pieces of CSS. 2:43
We can also actually edit the CSS. 2:51
So I can go ahead and click, and let's say we wanted this to be a smaller font size. 2:55
I can go ahead and do something like that, 3:02
or I could increase the font size, just like that. 3:04
And when I click away, 3:07
that will be maintained. We can also go ahead and edit the HTML. 3:09
So 3:16
I can click here and I'll right click. I'll say edit text. 3:16
And I'm just gonna change this to say, this is my cupcake website. 3:21
And then when I click away, you can see that 3:28
it changes it in real time in the browsing window. 3:30
Now one thing to keep in mind here is 3:35
that this doesn't actually save to any kind of file. 3:37
This is just going to edit it in your browser. 3:42
So nobody else will be able to see this and if I refresh the page, it will 3:47
go exactly back to how it was previously. So all of our edits will be removed. 3:53
So if you're actually editing something, you'll 4:00
want to do that in your Text editor. 4:03
You don't want to do that in 4:06
the Chrome Dev-tools. However, the Chrome Dev-tools are great if 4:07
you just want to quickly experiment and try a couple things out or, trace bugs. 4:12
There's a couple more things to go over in the Elements panel. 4:19
Now you saw that we can edit text, but we can also actually edit attributes. 4:22
And we can add attributes as well. So, for example, if I were to right-click 4:27
on this div here, I could edit the HTML. 4:32
Or, I could edit an attribute, or I could add an attribute. 4:37
And let's say I wanted to add an ID of my div, and 4:41
that's not going to do anything because there's no styles associated with it. 4:48
But you get the idea. You can go ahead and add attributes there. 4:52
We can also rearrange elements. 4:56
So if I were to grab one of these and then click 4:58
and drag, you can see that it rearranges it in the DOM 5:04
and it's also rearranging it on my webpage here. 5:10
So you can see that we've rearranged the page just by clicking and dragging here. 5:16
And again, if I go ahead and just refresh the page, 5:21
it's back to normal. 5:24
Now, the Elements panel is real useful for debugging, as I mentioned earlier. 5:27
If you're trying to figure out where certain CSS is being applied. 5:33
Or how something is being done, you can go ahead and inspect an element. 5:38
So for example, you'll notice on this button we have some rounded corners here. 5:42
And you might wanna know, if that's being done with an image, or if 5:47
it's being done with the border radius, CSS property. 5:52
We can do that by clicking on the button. 5:56
We look at the button class, and we find that in our CSS over here. 5:59
And we say okay. 6:04
It looks like border radius is being applied here, and if we were to uncheck 6:06
that, we could say yes, indeed, there is not an image there that's styling that. 6:12
It's actually being styled with border radius. 6:18
Which, by the way, is probably the way that you wanna do that. 6:21
That about wraps things up for the Elements panel, next 6:25
up we're gonna take a look at the Resources panel. 6:27