This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Elements Panel & Style Editor" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Jon Kuperman: Now they've taken that high level overview we're gonna start with our first section. I've kinda broken these into three main categories. So we're gonna do editing, how to create and edit files. Then after that will do debugging, how to take an app and start debugging it. And then after that we're gonna spend a good amount of time on profiling which includes all the memories, CPU all that stuff.
[00:00:24] So the first one is editing and we're gonna be sticking in the elements panel and the sources panel, those are the two for editing. So cool, so we kinda started talking a little bit about the elements panel here. We've got this representation of the DOM, how you can see all the different things you can click through stuff.
[00:00:44] And then by default it's on the styles tab over here. So there's a couple of things going on that are I think worth pointing out. One is at any time you can double click into things to edit them. But if at any time, and we're gonna do this and some of the exercises, you need to do a bigger edit than double clicking allows.
[00:01:01] Like for example, you can edit the classes but how would you add an ID, there's no place to double click to add an ID. That's actually not true cuz you can do a little trick like you can add like ID equals food, something like that and it'll be smart enough to figure that out.
[00:01:15] But just going forward, you can also right click on anything and click edit as HTML and it actually gives you this really nice, I mean it's not pretty printed. But it gives you like full access to everything that that element includes forward to change around. So that one's pretty handy, let me get out of here.
[00:01:34] On the right side you'll see all of these different things. There's a couple of cool things you can do here that are worth pointing out, one of them is adding new selectors. So if you're building a site on here, you can click this plus for a new style rule.
[00:01:50] And then you can go ahead and change the actual selector, so you could select HTML. And then you could do background blue or something like that. I'm not sure why that's not working, body background blue. So that looks terrible, but you can actually do more than just editing the current selectors, you can add new ones.
[00:02:08] You can simulate effects like hovering over here. So this is another thing that looks dramatically different from Chrome Stable. Chrome Stable has like a little thumb tack logo. Whereas in Canary, you've got this hovering tool. So you can simulate active, focus, hover, and visited state, which is really helpful.
[00:02:25] I've often seen people trying to work on some design things, so they're actually hovering with their mouse and then they go and they change the CSS, something like that. So what you can do using this neat tool, so this kind of allows you to interact with the website a lot easier.
[00:02:40] So instead of finding the element you want and doing an inspect on it, you can go ahead and click this. And then you can start browsing the page and you can see that it highlights which element you will go into. So when you click an element in this mode, it brings you right there in the DevTools which is pretty useful.
[00:02:57] So this is like you click here and you find the element that you want to edit and you click on it and it pops open that element in the elements tab. So then you could add like a hover class to it which unfortunately I don't have a very big hover effect, so it's not really able to be seen.
[00:03:14] But you can add those classes to anything with with this over here. Another thing that's really cool, this happened to me a lot at Twitter. Because Twitter, you have this timeline that's infinitely long basically. And sometimes I'd find an element in here that was like the problematic one that I wanted to be looking at.
[00:03:33] But I have no idea where it is in the document, right? So let's let's kinda set this example up, like a little bit of a contrived one. But let's say that I find this thumbnail here, which is for the timing tab. But let's say that I'm scrolled up here and let's say that the distance is actually huge between those two.
[00:03:53] So if I hover over this element here, the only kind of assist that I get, and you can see up here this tool tip will show. And tool tip will just give me an arrow like the element's down or the element's up or the element's, that's all it shows you.
[00:04:07] So instead of kind of like scrolling and then checking if it's still down. They have this really neat thing that they have where you can right click on any element and you can scroll into view. And it actually moves your view port around on the page to be centered around that element.
[00:04:21] So this is really great like single page apps or anything that's, you might be lost a little bit trying to find where something is. Another thing that's cool, I use this all the time for debugging, is you can use the H key to hide and show elements. So whatever you're focused on you can just hit H to make it go away and then H again to show it again.
[00:04:41] That's nice for doing design work. You can get some of the clutter out of the way something like that. Computed styles are great, so this app that I've made is really simple, right? There's only one style sheet, and there's not a lot of selectors. But again you can imagine working on a big application, like Facebook or something like that and you start scrolling over here.
[00:05:02] There's probably gonna be like hundreds of competing selectors. And sometimes you really just need to figure out where is this border coming from or why is my text blue something like that. So what you can do is you can go into these computed styles over here. And what this panel is it's basically, after all is said and done, all the rules are worked out all of the what trumps what is done, what styles are applied to this element.
[00:05:26] And the first thing it gives you is this kind of visualization of the document object model. So you see how wide and how tall the element is, how much padding is on it, how much border is on it and if any how much margin is on it. And these are actually the way that the DOM works right?
[00:05:42] So it goes from like padding out to margin. And then the second thing it gives which is really helpful is just the selectors that are actively being applied. So you could see if there was a border and you're trying to figure out where it was coming from you could click right here and see exactly where that's coming from.
[00:05:59] So again not super useful here, but really really useful on a big production app where you have a ton of different selectors.