2.1 Elements

Hello, and welcome to part two of the dev tools course. In the first part, we had a very introductory look at the, dev tools and in the second part, we're gonna take a look at the elements panel. So typically to get to the elements panel, you most likely right clicked and inspect element. To start out, well, let's just have a quick look at the layout. On the left you've got the Doombtree and on the right you've got a bunch of pings. Remember, it's not just styles that you can look at. There are a number of different pings for different use cases. And we'll just have a look at the Doombtree review for now. What this is showing you, is the current state of your dom. This is live and by live, I mean, we can select some text. We can add a set, hit enter, and that will apply itself to the dom in real time and you'll see the update immediately. You can also move around it, so you can simply click and drag. And just like that you get a live preview for what that element would look like, where it's actually there. Which is quite convenient. There we go, let's talk about navigating the dom. Let's say i'm at this dev at the main and I simply want to get to footer. Well I can use the down arrow key and I get to footer. I'm going to go back up. Let's say I want to go deeper and deeper, all right? To do that, I can use the right arrow key, and, and if I just carry on pressing on the right arrow key, it will essentially select child nodes of the currently selected nodes and continue that way. Likewise, if you select the left arrow key, that will collapse the nodes back again. So, you, you can totally navigate the stump structure using just the arrow keys. Editing HTML right click and choose edit as HTML and just like that, you can do so. You can actually edit this. [BLANK_AUDIO] And again, just like you'd expect, changes are applied in real time. If you so prefer, you can select just the node that you're interested in and edit that as HTML. It's really up to you. When you are able to edit things as HTML, that's pretty powerful. Dev tools does offer a few utility features, such as editing attributes. So for example, let's say I want to edit the source attribute. It can double click. And just like that it selected source. But attributes and attribute values are different things. So if I want to add this in attribute value likewise I'd just double click on the value itself, and it will highlight and ready to go, ready to add up. You can very easily add attributes by right clicking and selecting add attribute. And you can begin to type in something new here. Deleting nodes is fairly straight forward and intuitive. You right click and select delete node. You can simply select the delete key on your keyboard. We've had to look at how to edit the dom, what else can we do? We can extract useful information, let's say we want to get this CSS selector of a node. Previously, we had copies Xpath, which has been around for awhile. A recent feature of the dev tools is actually to copy a CSS path, which is very useful. So I'm going to copy this. I'm going to go to the console, the, the going to the console is not significant, I just want to show you some text. And if I pace that as you can see devtools has put that into our clip board. One thing to keep in mind is the selectors that devtools will generate aren't always the most efficient. Not to say they will be inefficient, it's just keep in mind the logic will be slightly different to what. You might use if you're writing the selector manually. You can also copy entire down structures as HTML. So can bunch the console just to show you some text. And we've got a nicely indented section of HTML, apparently cross blending to the parent node of which we copied. This, this will happily go in your code editor, in sublime you can use command shift feed to make sure the indentation is correct. I think we've covered, you know, the important things of the Doomtree view. Again, it's fairly straight forward. You've also go this bread crumb trail right at the bottom. And it's fairly straight forward what it does. The, the deeper, it will show you the trail which it took to get there. You can hover over these nodes like many things in the dev tools, this is all interactive. You can click on these nodes to go back to them. So you don't kinda lose your way so to speak. Yeah, I think that's it for the Doomtree review. We'll come back at that later. The start pane is just one of the many panes. In this right-hand section, and notice that I've resized this because, you know, we're talking about it. I want, want to give more prominence to that. So, I do recommend you do that in your workflow as well. In the styles pane many things are editable, but before we talk about what's editable and what's not, let's. Have a look at exactly what we can see. We've got a style role. This is the section that's currently highlighted. On top of the style role we've got the file which it's contained with in and the line number, where it begins. Again, early we are seeing many things in the dev tools are interactive. You can single click on any of these sections. So if I single click the select, I now have the ability to change the selector. Likewise, I can change this property. I can change this property value. This is one of the most common use cases that I have witnessed. It's inspecting an element. It's finding the value and then tweaking it. Tweaking to see what it looks like. Now while I'm here I want to show you a little trick. We can use up and down arrow keys to increment and decrement by one. Ms are the perfect use case because you don't really go from two to three. You want small increments. So to do that we can do alt, and up and that will increment by 0 .1, will decrement. And we can also use a shift and that, that will increment by 10. If I remove that value- [BLANK_AUDIO] You'll find that we get a bunch of auto complete suggestions. So auto complete in the duct tools is a thing. It's very useful. We could, you get the same forum for property so I'm gonna make a new property by clicking. Basically, at the end of the last property. Insert new property for me, and if I just start typing, you know, d, for example, you get a few suggestions. I'll select Display, and I'll select it by pressing Tab. And now it will automatically take me to the property value. Now what's nice about where I am right now, is it's realized what property I'm interested in and it's providing me with valid CSS values for that property. This is incredibly convenient. One thing you should keep in mind is that. This is not exhaustive. Well, I can't comment for this property in particular, but, what you'll find with many of the properties you don't get every single value. If you find that it's missing something critical then feel free to raise a bug, I'm sure the Chrome team will be happy to fix it. That's something to keep in mind. Units are quite easy to edit. We've already had a look at how we can edit these sorta numerical units, using shortcuts. Colors are fairly convenient because you can simply. Click on the color, and you get this little color pixel, which is super nice. Top of that, if I shift-click on the square, I can view different formats of the color like hetracel, hex, and IGE. Moving away from the style rules, let's take a look a this little plus button. What this will do is create a new selector based on the new selected node. Error selected the dev of an idea of more details. And unsurprisingly it's put back in the selector. It definitely makes sense, triggering out pseudo classes. So let's take a look at something which changes at state based on hovering. These are perfect examples, if I hover over this row, it changes color. Now I want to find out that color, how do I do that? Well click here, the current, with this node selected I select hover. It's now triggered a hover state. And as you can see the star rule has just suddenly appeared, and I can go ahead and edit that and that will play. Okay, maybe I didn't use the best color. You can see that's quite handy. All right. So far, we've looked at the Doombtree review, we've looked at editing the dom the bread crumb trail. The styles pane, how you can add styles, edit styles, remove them, if needed. If you just remove that property, also removes the value. And, oh don't forget, you can also copy this entire style rule and that will, that will just work. And you can put that into your code. It's, command shift in Sublime to maintain the indentation of all. But I think that's it for the styles pane. We'll take a look at a few others computed. So this. This is really nice. A slow, what I like to think of as a visual representation of the box model. Now if you learning about the box model this is great. Having used this too much but again, it is very handy. Let me find something that includes a bit of padding. Here we go. Okay a little margin wrapper. These are [UNKNOWN] which is super cool. I only found out not too long ago. And what, what's nice is, if you find something is a bit bigger than you expected, this is like the perfect place, because you can find out, oh it is marginal, it's padding affecting the overall dimensions of this element. Event listeners, Event Listeners are very powerful. Before I show you, let me find an element, which will react based on some JavaScript, okay. This, when I type in here, and let me make this a bit smaller so you can see. When I begin to type in, let's try, box, you can see that the list updates in real time. So it's fair to say that JavaScript is handling this for us and if we select, the dominant in question the input textbooks. Indeed, we can go to the Event Listeners tab and find out exactly what events are registered on the element. So, the top level item is the event itself. Now, then you get the event handlers. I guess the, the parts that you want to pay attention to, or that are most likely gonna be useful to you, is the line number. The file where it's actually occurring, the event name, and the function it self. You might be asking well, how, how would you be aware of the function? Well you can hover over it and see the source, which is really useful. You can, even better you can right click and go to show function definition. So this is super convenient, it's really great. I know there's an extension, chrome extension which does something similar, or show you just Event Listeners on various elements on your page. This is very similar, oh, one thing I would add, do keep in mind that. I'm currently using an incognito window. I do suggest you do the same. If you have a bunch of Chrome extensions, like I do, then you very well attach Event Listeners to your done. So what will happen is you'll select one, and you'll see a bunch of events here. And you won't notice what's from your own source code and what's from this external script. This is basically because extensions won't run in incognito windows unless you instruct them to. [INAUDIBLE] is pretty useful. If I select something right at the bottom, okay. So, I'm at the top of the page now, and I've got the footer which is selected, just by hovering over it you get a little tool tip in the view port, which shows the general direction of the element. Because dev tools knows, that it's not in your viewpoint and it's trying to be helpful. Even better, right click, scroll into view, it will take you straight to the element. Which is very useful. Okay? Well, that's it for now. Thank you for watching.