Debugging CSS with Dev Tools

[00:00:00]
>> Kevin Powell: And before we continue diving too deep into things, one thing that's really important, and I'm going to be pulling these up a lot, is our dev tools. Dev tools are an essential part of debugging in anything we're doing, but especially CSS. It's the way we debug our CSS essentially. There's multiple ways you can do it. You can right click and choose inspect. You can hit the F12 key on your keyboard, or you can do a Control Shift, or if you're on a Mac, Command Shift I, and they open a sidebar.

[00:00:27]
It might open in a different location. You can change the location with the three dots here and then choose a different spot where you want to dock it. So you can dock it on the bottom, you can remove it and have it docked out, and just like a website you can zoom in and out on, you can also zoom in and out on your dev tools if you need them bigger or smaller. I'm going to be using Chrome as we go through this course.

[00:00:49]
All Chromium browsers look generally the same. Edge has a few little differences with it, but they're again, mostly the same. Firefox is very similar. Safari is a little bit different with certain features. They're all there, they're just not quite exactly the same or the same placement. So, but in general, they all have very similar features to one another. For CSS, the important ones are the style tag, the tab, I should say.

[00:01:17]
So if we have something selected here, we can see the HTML on the side. This is our DOM. And then down here I have a styles where I can actually see everything. It looks kind of weird on this page because of what I used to build it, but you can see all the styles that are being applied coming down the side. I can go to a computed tab that shows me the box model, which we'll be talking about later, and then if I scroll down, it's all the properties, the finished thing, what the browser's computing for the final value that's actually getting applied on things, and a layout tab that we're going to be exploring a little bit later as well.

[00:01:52]
So we're using it for debugging. There is this right here, which there are three problems on. There's some styles that aren't being applied, and I want to see if you guys can all find these styles that it's not doing by inspecting on it and seeing if you can find what the problems are. Anybody finding anything? Yeah, right. Um, the display the. Uh, display absolute is not correct. So, one thing I should have shown before, but if you grab this icon, or actually if you right click on an element when you do your inspect, it will select that element in the tree that's right here, so you see it right away, it's on that paragraph, and there's the div here to debug me.

[00:02:33]
You can also use this thing, you click on that and then it highlights everything as you're going, and if you click on it, it selects it. And so Ryan just found this display absolute. This is the mistake I make probably the most often and can't figure out the problem for. I do this multiple times per day, and it drives me nuts. But, yeah, display absolute. So the browser is doing two things. It's showing this is crossed off, and we have this sign right there.

[00:03:00]
So it's actually, if I hover on top of that, it's telling me it's an invalid property value. So there's nothing wrong with the display, it's saying absolute doesn't work. This doesn't help me all the time. Well, it does now because I've done it so many times, but at the beginning you might be going, but absolute's a valid word, and then you just have to remember that, oh, I'm using it somewhere that it doesn't actually make sense.

[00:03:20]
So I could change the positioning, which is what I would have wanted, to be able to fix that. There's two more. I have this open, so it's a little bit of a cheat code. Does a Grant, do you want to point out one of them? The color, yeah. So the color is being crossed off, and in this case, if I go and take a look, it's saying it's an unknown property name. I'm Canadian, I spell color with a U, so. But sadly in CSS we cannot spell color with a U, so the mistake is a typo here.

[00:03:51]
So typos are one of the biggest problems you run into with CSS. This is the easiest way for you to be able to find them. And one of the newest features that's been added to dev tools, which is amazing, as I think Firefox first did it, but Chrome has it now as well, is if you use something that's completely valid, but it doesn't do anything, which is being highlighted here with this one that's getting grayed out, and there's a little I next to it.

[00:04:14]
And it tells me what the problem is. Position static property prevents top from having an effect. Try doing, you know, something else, essentially. So this can happen. There's properties and values that only work in certain contexts. So thankfully now our dev tools actually tell us when that's an issue because in the old days it wouldn't actually say anything was wrong with that. So those are like the three big things.

[00:04:37]
If you're just fighting with your CSS and nothing is happening, this is the first thing to dive in. And if you see no styles applying, because sometimes you inspect and the styles you wrote aren't applying, it might be a typo in your class name. That's usually what it is.