CSS Debugging Tips

Key Takeaways

Hello, my front-end friend. Have you ever had a style that's getting overwritten for a reason that you just can't figure out? Or maybe you have a pseudo class like a hover or focus state that's just annoying to try and style cuz it keeps disappearing when your mouse isn't there. Or if it's a focus state when the page refreshes, you have to refocus on it. Or maybe you have some mystery element causing some overflow that you can't find. Well, there's a lot of dev tool features that are out there that go under the radar that can help us with all of those situations and a lot more. We're going to be exploring some of those today. So, we're going to jump into this demo that I have set up right here where I have this button where you can see there's some text in there that I can't read. Uh, just cuz the colors are too close. And then I come and I set a color on here of white cuz I want to be able to see it. And my white color doesn't come in. And you're just like, why isn't it happening there? And so, what I would suggest you do is you open up your dev tools, grab the little selector there, and select the thing you want first of all. Uh, but then when you're in here, when we're looking like you get the list of all the styles here, and you can hunt around to try and find what's actually, you know, coloring your thing. And in this situation, it's a smaller demo, so it wouldn't be that hard to find. But sometimes there's lots and lots of styles that are being applied. And through inheritance and other things, there's just a lot to hunt through. Uh, though, I will say, usually the ones you're looking for are at the top, and the ones that are being overwritten are lower down. But it can still be a little bit of a pain to hunt down and find things at times. So, we can do it either here through the filter or if you go over to your computed tab, uh, which is super handy and I don't think enough people use it. Uh, just make sure your show all isn't on cuz that's going to show things that aren't declared but are coming through user agent styles. So, we can turn off the show all. And then even then, this is like really annoying through, especially with the borders and stuff where there's tons of things. But, you can just come in here and write color and it's going to find any property that has color in it. And I can find my color. And not only can I find the color, so it's showing me color there, and it's showing me what it's actually coming out to. If I click on this arrow thing here, it's actually going to bring me to where that style is being applied, which is this higher specificity selector that I have somewhere else. And I'm in a code pen right now, so it just says style. But if this was your actual stylesheet, like a regular CSS file, it would actually tell you what line of your CSS file it's on as well. So that can be kind of handy. The other thing you can do when you're here is if you click the little drop down instead of clicking this arrow. When I click on that, you see also where the styles are coming from. So you can see the different styles that are coming. So we go from the user agent style to this button text thing to this white that's here to eventually this one. And for each one of them, you can also click to get to where the style is coming from. So if I click that once again, it brings me back to here. Then I know where it's coming from. If I turn that off, I can see that that worked. So then I just have to hunt down for that terrible selector that I had somewhere. or you know we'll say someone else wrote it cuz I would never do something like this and and cause a problem and then all of a sudden we fix our problem. Working with buttons another thing that's quite common is the pseudo class is like focus visible and in this case if I tab over I can see it and let's make this offset uh a little bit bigger. We'll do like 10 pixels and we're going to make this a bit bigger too just for demo purposes. I wouldn't actually make this this big. Uh but with that done if I tab on over to it we can see that we have that focus state coming on there. But the problem is as soon as I go, okay, I actually want to change that. And so that's selected, I click over here, and it goes away. You're like, oh, but I need to see it while I'm making these changes. And this is the same for hover states. So I'm only doing focus visible, but maybe here we'd have an and hover as well. And if you haven't seen CSS nesting before, this is just the same as doing a button hover and a button focus visible. That would not be nested inside of this. If you want to know more about nesting, I'll include a link to a video in the description that talks more about how it works. Uh, but we have my hover and my focus visible there. So when we hover, we also get it. But that means I have to leave my mouse here all the time. Very frustrating. So in my dev tools still, once again, select the element you want. Make sure that's selected however you're doing it within your dev tools. And then you can just come onto this guy right here. We can see we have a h. And this is for all of the different pseudo states that we have pseudo classes that involve states. We have our active, focus, focus visible, hover, focus within, and our target. So I can do my focus visible and it emulates what it looks like. So, it just pretends that it's always on. And then I can come through and I can go, actually, this is kind of big. What if I make it five? And then I still have that on there. Or I want to make it two. Or what if I want it negative five? And then make this white or whatever. And I can try different things out and play around with it without having to worry about losing the style that I currently have on there. And if you don't know about focus and focus visible, like what what is focus visible? If you're used to using focus states, I would recommend usually using focus visible almost all the time, but I'll put a link once again to a video in the description about the difference between the two of them. But let's bring this back out to maybe an offset of 5 pixels for the outline. And we'll go back to our purple that we or we can do a we'll use our accent here to sort of match the styling we have on. So everything here is not very fancy looking, but we can sort of at least have it a little bit more consistent even if it doesn't look great. And so yeah, that's a pretty good one there. And another issue that can be really frustrating is when you have mystery overflows. And you might have noticed I had a scroll bar here going this way. Sometimes this isn't even really noticed until you test on mobile and then all of a sudden you have this like zoomed out page because there's something that's overflowing. Uh and it can be quite hard to find the thing that's causing the overflow. A little bit frustrating in Chrome is it's actually kind of hard to find these. Uh they're supposed to be adding something in. Uh we can see things that are scrolling. So there are these scroll tabs that show up. So it will show you when there's scrolling. So if it's an inner element that has a scroll, you can find it. And Chrome's supposed to be adding a little tab that adds an overflow in there that will show you any element that's causing overflow. That currently isn't here, though, as you can see. Maybe there's a feature flag or something I can turn on to get them. But I just want that included in my dev tools. But luckily, I can get that just by going into Firefox instead. And if I open my dev tools in Firefox, uh, and I take a look in here, you're actually going to see any element gets this little overflow on there. And let me just make this a little bit bigger cuz it's all kind of really small, uh, by default in here. But you can still see we get these the default scroll tabs that are coming. So I have this scroll here, but then I can see I have an overflow here. The one problem with this overflow that I've noticed is everything will say overflow on it if it's not on the page because technically it's causing an horizontal overflow, right? Cuz our page is scrolling up and down or vertical overflow I should say. Uh so it doesn't distinguish between horizontal and vertical overflows, but it's still pretty good in the sense that you can come through and say I I look here and I can see the things that are currently on my page that I shouldn't be causing an overflow. And I notice here this HR that's showing up and it has an overflow and then this one doesn't. Like if something here does like here I don't see an overflow. I see one and then I don't see one. That means like this is on the page. So this isn't causing anything to scroll. So that means this is probably the problem. And when I highlight it uh let's just scroll that down a little bit. When I highlight that I can definitely see that that's looks like it's shooting off the page. So it's a step in the right direction. It's not perfect but at least it gives you an idea of what elements might be causing scrolling. However, there is one better option out there for this that makes it even easier to find. Uh, but I sort of wanted to go through the progression in finding them. And this one is Poly Pane. If you don't know Poly Pane, it is a browser for developers, which is kind of cool cuz you can see I'm looking at the same page across different uh devices here and they all scroll together and stuff and so you can debug and see things across all of them. Uh, the one thing and the reason I didn't start with this is it is a paid product. It is a really good one. There's lots of really good features. We're only looking at one of them today. Uh, but I would definitely recommend looking at it. There is a link to it in the description if you want to check it out. And if you do end up purchasing it, that link is an affiliate link. So, it does also help out my channel. But I would recommend trying to get your business to cover it because for a business, it's not expensive. And there's lots of really good features that can help you out, including this little thing that shows up at the bottom of pages where there's horizontal overflow. So, right away, it tells me there is without me even having to notice. But when you click on that, it will automatically add that outline to things. So, you get the outline of uh what is it? the just the solid outline thing that shows up on elements. Uh, right, an outline of one pixel or whatever. And immediately I can see what's actually causing it there. So, that's just turning that on and off visualizes it for you without you having to like have an extension built in or having to manually add that overflow. But, there's also this as soon as you actually use that, it it's able to find what the cause is. And you can see I get this i12 thing. So every time I do this, it's popping things open on the side that's a little bit off screen, but it's actually showing the different things here that are causing that overflow to happen. So then I can just go through here and I can actually highlight the different elements. And in this case, I do have multiple different elements that are causing uh overflows along the way. And Poly Pane is finding them visually for me, but it's also highlighting them here for me. So I can find out what's causing that overflow. Uh which is pretty cool. And you can click on it and you get the styles and everything else there. So, uh, yeah, nice little bonus feature there to quickly and easily find them, not only visually cuz sometimes even when you put outlines and everything, it doesn't quite show up or it's it's can be a little bit more hard to like hunt them down still if you have lots of overlapping things uh or nested things as well. So, it's kind of neat that in that, you know, this just tells you exactly what the overflowing elements are. So, a nice quick win right there. Now, another thing that's really really handy at times is let's come back onto our button over here uh that we were playing with where I have this focus visible setup and I'm going to go uh back. Sorry, I'm zoomed in a lot so I can't see all of the things I want to be able to see. I want to close this hover state. Just when you're really zoomed in, it covers up a lot of the stuff that you want to look at. Uh and when we're in here, when I was playing with my outline before, I was coming on there and then like, you know, you're doing 10, 12, 14, whatever it is. But if you come in your dev tools and you click on a number, you can push up and down on your keyboard and it will just go up and down by one. And a lot of people don't seem to realize this, but it's a really nice way to make small tweaks just to visually see the difference that something is making. Uh, but also when you're in here, if you push shift, it will go up by 10. Now, on my outline, I probably don't want to be going up by 10 cuz it's quite a bit, but it is an option that you can do. Uh, if you hold alt, it will do by 0.1. So 0.1 won't be very useful for pixels here. But let's say this was a 0.5 rem that I had set up uh or 0.5 m whatever it is. If I hold alt, I can do it by 0.1 instead of it always being by one. So depending on the unit you want. Uh that's holding alt. I don't know if that's different on a Mac or not. I do apologize. I am on Windows, so maybe that's an option. I'll let you figure that out if you're on a Mac. Uh and the last one is uh we're definitely going to do this as a small unit. We'll do pixels, but it's not really going to help us here. This would be more for layout stuff, padding, margins, something we need a lot of it. Is if you hold control down, uh, then it's going by what? Increments of 100 up and down. So, uh, that's quite a lot, but maybe you just want to push things a lot. So, that option is there for you. Uh, this is currently in Chrome, but I do believe that's the same in all browsers, or at least with Firefox as well. And again, those shortcuts are for Windows. You might have to experiment a little bit if you're on Mac, but it could be that they're all the same. And really quickly, just before we get to the last tip if you'd like some extra tips or more tips than what we're covering in this video and you're finding this video useful, I've partnered up with Annit Sheen to create a free five-part miniourse on making the most out of your dev tools, specifically with practical use cases for developers that are currently working on a project and not just like some random tips and tricks along the way. A little bit more like what we're doing in this video. Though, I do think these ones are pretty practical as well. But if you do want to sign up for that, again, it's a completely free course, five parts, just going through different things of getting started with your dev tools, practical tips with them and making the most out of them. The link to that is down in the description below. And now, let's jump into our last tip, which is if you are in here and you're in your dev tools, and I do this a lot where I make changes in my dev tools. This is actually multi-art tip. It's a few different ways that we can get these styles out of your dev tools. Uh, one of them is if you just did a few changes like I did now where I came in with this offset that I quite like 101 pixels for whatever reason, but you might have also, I don't know, let's just say we came in here and we also changed uh the color to be terrible and we make it a green or something. Very nice contrast ratio we have there. And so if you come in on these here, there's a few different things you can actually get to happen. If I click on where the selectors are, I get three options of copy selector, copy rule, and copy all declarations. You might have come in with a new selector. Maybe, maybe not. Uh, but you can, if you did, you can copy just the selector. You can copy the rule, which is the rule itself. Like, let's copy that rule and just paste it in. You'll see that it copies the entire rule in. So, exactly what we had, the entire thing just comes in, which is probably the most useful. Or if you rightclick, you can also do copy all declarations cuz maybe you already have your selector and then you just want to come in and paste the declarations that are there and then they come in. So, those are some options that you have there. on copying things. If instead of right-clicking on the selectors, you right click on one of the properties or values, you get some other options here. So, copy declaration, you can copy an individual property, value rule, copy declaration as JavaScript could be interesting there. Uh, copy all declarations, copy them all as JavaScript, and view computed value. And that view computed value can actually be kind of handy cuz if you click on it again, it brings you to the computed part. So, back in the computed tab. So if you have some weird thing going on where you want to know like what the actual computed value is, it brings you over to there. And there is another way we can actually get say you have lots of changes over a bunch of elements that we're going to do in a second. Uh you can get those changes in Chrome though I don't really like Chrome's implementation of it. So if uh you do a control shiftp and it would be command shiftp on a Mac. That shortcut I know. And you write changes you get a show changes that pops up and we're going to get no changes. Actually if I make changes here in code pen I don't think they would appear anyway. But let's go look at this other page I have where I have made some changes here. So it shows me the changes I made sort of like GitHub style here with the the different things that I've done along the way. Uh which can be okay, but there is a copy button here that you don't want to press. It just takes it it from my experience anyway. I'm not getting what I want. I only want to get the actual changes I've made. And this is where the dev tools in Firefox are a lot better. Uh cuz if we're doing it in Firefox, let's come to here. And it will actually work in code pen here as well, which I don't know why Chrome's wasn't working for me. But let's say I want to fix this problem down here with the overflow that I had. That was because of the width I had on here. So, I can remove that. And let's come and change something on my button. We're just going to say that on my button. Uh we're going to go back to uh here. Let's just change the color that we have here for the outline. And I don't know, we do one more last thing. I'm going to take off my font weight for some reason. Uh and if I go to my changes here, which is just a normal tab, you don't have to like hunt it down. We have layout computed and then my changes that are right there. And in the changes, it will show you all the different changes you made, but only the changes you've made. And it lets you copy the individual rules along the way, like the whole way down. So you can just copy any of the the different rules that you wanted uh to get the entire rule with the change you made. So you can paste it over into your CSS or you can click copy all changes, get all of them, and paste all of those in uh along, you know, just paste it in. you get the different ones and then do what you want with those. But at least then you have them in a bit more of an easy way to work with. If there is an easier way to do that in Chrome, please let me know with a comment down below. If you're interested in that DevTip miniourse, the link to it is in the description below. And with that, I would like to thank my enabler of awesome Andrew, as well as all my other patrons and channel members for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.