The panel that we're looking at here is the Elements panel.

You'll notice that says elements right here.

There's a lot of other panels and we're gonna look at each one.

There's Resources, Network, Sources, Timeline, Profiles, Audits, and Console.

In the Elements panel, on the left side here, we have the dom tree, or document

object model tree, which is basically a fancy way of saying our HTML code.

So we can go ahead and twirl out all of our different

HTML elements here, and we can see what our document looks like.

Over on the right side here, we have our CSS.

So when we click on any of our elements in

our dom we can see what the CSS looks like.

Now, when I pull up the Dev tools, if I haven't right clicked and hit

inspect element, and I've just brought them up using the Hot key or the Menu.

I can go ahead and still select elements using this little magnifying

glass tool down here at the bottom.

So if I click on the magnifying glass, you'll

see that I can hover over anything on my

web page, and it will give me a little

bit of information about it in this little tool-tip here.

So you can see how much space the element is actually taking up.

And you can also see what kind of margin and padding that element has.

And that's the orange area.

And then, in the tool tip, we can also see

the total amount of space that the element is taking up.

So, this element is 745 pixels by 111 pixels.

And we can also see what type of element it is, so this is an H1.

Down here, we have an A element, with the class.btn on it.

And over here we have an image. Now,

I'm just hovering right now, with my magnifying glass selected.

If I actually click on something, you'll see down

here that it will highlight the tool in the DOM.

So it's highlighted that H1.

And we can go ahead and open that up, and see the contents of it inside.

Now when we select an element like this. Like I said before it

will also show the CSS for that element over on the right.

So, we can go ahead and do a couple of different things here.

We can uncheck CSS properties.

And that does exactly what you would expect.

It enables and disables Various pieces of CSS.

We can also actually edit the CSS.

So I can go ahead and click, and lets say we wanted this to be a smaller font size.

I can go ahead and do something like that,

or I could increase the font size, just like that.

And when I click away.

That will be maintained. We can also go ahead and edit the HTML.

So

I can click here and I'll right click. I'll say edit text.

And I'm just gonna change this to say, this is my cupcake website.

And then when I click away, you can see that

it changes it in real time in the browsing window.

Now one thing to keep in mind here is

that this doesn't actually save to any kind of file.

This is just going to edit it in your browser.

So nobody else will be able to see this and if I refresh the page, it will

go exactly back to how it was previously. So all of our edits will be removed.

So if you're actually editing something, you'll

want to do that in your Text editor.

You don't want to do that in

the Chrome Dev-tools. However, the Chrome Dev-tools are great if

you just want to quickly experiment and try a couple things out or, trace bugs.

There's a couple more things to go over in the Elements panel.

Now you saw that we can edit text, but we can also actually edit attributes.

And we can add attributes as well. So, for example, if I were to right-click

on this div here, I could edit the HTML.

Or, I could edit an attribute, or I could add an attribute.

And let's say I wanted to add an ID of my div, and

that's not going to do anything because there's no styles associated with it.

But you get the idea. You can go ahead and add attributes there.

We can also rearrange elements.

So if I were to grab one of these and then click

and drag, you can see that it rearranges it in the DOM

and it's also rearranging it on my webpage here.

So you can see that we've rearranged the page just by clicking and dragging here.

And again, if I go ahead and just refresh the page,

it's back to normal.

Now, the Elements panel is real useful for debugging, as I mentioned earlier.

If you're trying to figure out where certain CSS is being applied.

Or how something is being done, you can go ahead and inspect an element.

So for example, you'll notice on this button we have some rounded corners here.

And you might wanna know, if that's being done with an image, or if

it's being done with the border radius, CSS property.

We can do that by clicking on the button.

We look at the button class, and we find that in our CSS over here.

And we say okay.

It looks like border radius is being applied here, and if we were to uncheck

that, we could say yes, indeed, there is not an image there that's styling that.

It's actually being styled with border radius.

Which, by the way, is probably the way that you wanna do that.

That about wraps things up for the Elements panel, next

up we're gonna take a look at the Resources panel.