The Elements Panel

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 lets 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