This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Elements & Styles" Lesson
[00:00:02]
>> Jon Kuperman: So the first section is editing. So this is gonna be all sorts of stuff, like you're working on your website, you're using the DevTools to author code in some way shape or form. Cool, so I'm gonna go over to my lessons here. So the DevTools can be used as a full time IDE.
[00:00:18] I should put a little asterisk next to that cuz it's not always possible. If you build a Create React app or something like that, it's not gonna be applicable. But I have seen tremendous improvements in using the DevTools as an IDE in just the last six months. So I really think we're heading in the direction where they'll be able to use this as an IDE for any app.
[00:00:37] I just wanna put that caveat out now, and we'll get into the specifics why it's not always applicable. Cool, so now I'm gonna open up the DevTools and just show a couple of things. So it can do a lot of amazing things. It can edit your HTML and CSS.
[00:00:50] So if I go and I find Edit HTML and CSS, I can see it here. We can double-click to get into this edit and we can change it to anything, right, like hello, and it'll change. Notice that if you refresh the page, it'll go back to what it was again.
[00:01:04] So you're kinda editing locally right now. You can also use it to edit the CSS. So I can see like, this is this black color, I could change that to anything that I want. So we change it to red, and you'll see it as red. Again, a refresh sets it back.
[00:01:19]
>> Jon Kuperman: We can use it to save and reuse a color palette. So this is a pretty cool. I think that this site, since it only has one color on it, which is [LAUGH] the blue, won't be a great example. But let me pop over to, let's pop over to FrontendMasters.com, which is this beautiful site here.
[00:01:38] And if we go and we find any color on FrontendMasters.com, like you can see the body is set to this black, right? I don't want too much inception going on, so I'll move that. One cool thing you can do is, so if you click in the number, in the hex code, it'll take you into the edit mode, right, where you can change things.
[00:01:56] But if you click on the swatch, it'll pop up this really cool color panel, which is very difficult to see. And so this color panel is cool, right, it lets you, as a designer, select what colors that you're looking for. But the thing that I wanted to bring attention to here is that it also has this little tab down here.
[00:02:15] And so if you click that, so again, to get here, you go to any site that has more than a few colors, you click on the little box with the color in it, and then you click on the second set of arrows down here, and it pops up this screen.
[00:02:27] So what's really cool here, I use this for a few different things. One, it always saves Google's Material Design color palette, which is really cool. So Google's Material Design is their kinda design guidelines. They have colors, they take and in accessibility, all these different things. So if I set the Material Design color palette, then we'll see all of these down here have updated to these, really cool.
[00:02:47] So I don't know how to design nice looking websites. So whenever I'm building a website, I go into the DevTools and I set it to Material Design, and then I just stick to these colors. It's really neat too, if you click on one, it shows you all the shades that are available.
[00:02:59] So one thing that I would do, right, is I would start a website, make everything gray, or black, or whatever. Then I'd open the DevTools and I'd start kinda clicking around, and I'd just set everything to these Material Design colors, and I'd grab the hexes out of here.
[00:03:11] But the thing that I think is really neat, especially if you're working on the same production app every single day, is if you go back to these, it actually is smart enough to go through your website that you're currently on and pull out all of the shared colors and make a custom color palette just for you.
[00:03:26] And so this is on every website. So then if you set it to page colors, now down here all I have are the trademark Frontend Masters colors. So I use this a lot so I don't have to keep looking up hex codes or things like that, I just know that this is the Frontend Masters orangey red, this is the blue, this is the light blue, those kind of things.
[00:03:43] So I usually have it set to the page color format, just so I have quick access to all those things.
>> Jon Kuperman: Scroll items into view. So I've worked on a lot of infinite scrolling apps before. So sometimes they get really difficult to debug because you'll do something in the console, and you'll grab, you have this element, right?
[00:04:07] So you have an element like Edit HTML and CSS, and I wanna see it, I wanna see where it is on the page. And so for the longest time, all you get, if you can see. Unfortunately, I can't make it bigger, but there's in the top-left corner, there's this little black dialog, like a tool tip with an arrow.
[00:04:22] And so that's just information that says, hey, the thing that you have selected down here, it lives up. And so the thing that you had to do is you'd scroll a little bit and you'd go back to it. Okay, it's still up. You scroll a little bit, and you go back to it, then you find it.
[00:04:33] But one really cool thing on these infinite scrolling apps, you can right-click on any element, and you can click scroll into view. And it'll actually move your browser's focus to be focused on the element that you're looking for.
>> Jon Kuperman: You can use it to hide and show elements.
[00:04:50] So you've got kinda two different options here. So if I click on hide and show elements, you can use the H key inside of the DevTools, and that'll make the element go away, and reappear with H. But you'll noticed that the rest of the site doesn't collapse here, right, and so this is the equivalent to doing a visibility hidden, so that it still carves out its space in the DOM, you're just not seeing the elements.
[00:05:12] So I use this when I'm designing a lot to kinda try to hide something. If you want to actually see what the website would look like without the node, you can click on that element, just hit the Delete key. And so we can see when I hit the Delete, the site recollapses on top of that.
[00:05:24] If you wanna undo a Delete, you can do it with Ctrl+Z or Cmd+Z. Yeah, Steve?
>> Speaker 2: I saw that you put a special class in there to make the element invisible. If you have CSS that has something like bang important-
>> Jon Kuperman: Will it go over the class that you have?
[00:05:39]
>> Speaker 2: What's the precedence?
>> Jon Kuperman: Yeah, that's a really good question. I do believe that if you have something that has a visible, actually, let's try it out. That's really cool, that's a cool idea. So if you do a visibility, visible, important. Okay, so now this is, and now we try hiding it.
[00:05:59] It does not hide. So that's really good, that's really good. Yeah, so when you hit the H key to hide an element, we can see down here what's kind of happened, right? Is that the DevTools have added a class to the element, and then they've added a rule to that class, which is visibility hidden.
[00:06:15] And so Steve's question was really good, it's like, what if you have a specific selector on that that says, don't be hidden? So we added a more specific selector, and we'll get in the CSS specificity in a minute, and we said always be visible. That does trump it, so yeah.
[00:06:29] So you would not be able to hide that.
>> Jon Kuperman: Trigger various states. So I use this one at lot too. Another one, a lot of these have come from things I've seen before. So if you hover on a link like this, and I've got it pulled up here, and I see that my color is red.
[00:06:48] And then I hover on it, I can see that the link changes from red to yellow, I'll make that a little bit bigger. So it goes from red to yellow. And so if I wanted to figure out what yellow that is, it gets really difficult, right? Because by the time I get back over to here, it's not hovered anymore, it's not in its hover state.
[00:07:07] And so a few things you could do, you could look through the CSS and you could just try to figure out what it is, or you can use these synthetic events. So with the element highlighted here, you can click on this :hov, and then you can trigger any element state.
[00:07:20] So you can say, well, what does it look like when it's hovered? Boom, and now you can see the hover state is triggered, and I can actually get the information out of DevTools. So what does it look like when it's been visited? The same thing, it turns green over here.
[00:07:30] What does it look like when it gets focused on? It gets this blue ring around it. So you can kinda use these to set the states, and then take your time debugging or doing whatever you'd like.