 Hi there, my friend and friends. Thank you for coming back for yet another video. And anyone who's written just even a single line of CSS has run into issues where they're positive that the CSS they're writing is correct and it should be working fine. And either nothing at all is happening or something is happening, but it's not quite what you want. So if that sounds like something you can relate to, you're definitely not alone. Thing is, when we run into these problems, there's a lot of negative side effects. If you're relatively new to getting into coding, it can be a real confidence killer. As you're positive, everything you've done is correct and you're just trying in vain to fix these mistakes. And of course, even if you have more experience, hunting down these problems can be something that just completely kills your momentum. And it can be a really big time suck. I've been debugging my own and other people CSS for years now, and I've gotten pretty good at it over time. So today, I want to share with you the different strategies that I use to quickly find and solve the issues that we can run into when we're writing our CSS. So to start off, we are going to be looking at Chrome that Chrome and Firefox have very similar dev tools and safaris aren't very different either. So whatever browser you're using, you should be able to keep up with, though I will be looking at one feature that's only in Firefox a little bit later on as well. But here's sort of a simple layout that we're going to be playing around with a little bit. And I have a few different problems here. And the first thing, whether it's my own CSS that I'm having trouble with, or if it's somebody else's and they're sharing something like here's my problem, I'm not going to go and look at their code. I'm not even going to try and go through my own code to try and find out what's going on. As soon as something isn't working the way I think it should be, I open up my browser, I find the thing where the problem is, and I'm going to right click on it and I'm going to choose inspect. You can also use the shortcut that the shortcut I use is control shift I, which will open up the dev tools as well. It would be a command shift I if you're on a Mac. And I think you could also use F 12 of my keyboard doesn't have an F 12 on it. So I just use my control shift I once you've opened up your dev tools, it is possible if you use the shortcut that you're on a different pain than I'm on. And it might also be on the bottom or on the left because you have this little thing you can change where your dev tools are docked around the sides there. I'm going to bring this back over onto the right. Just for what we go through here and you can zoom in and zoom out in here. Pretty well Firefox does have a bit of a limited zoom of what you can do in that one just so you know. So there is a lot to our dev tools and lots of places we can poke around and move stuff and try and figure out what's happening. I'm not doing a deep dive into the dev tools. I just want to look at how we can debug the most common problems that I see in today's video. So the first thing that I do want to say is visualization of things is really important. So often I'll even say like add a background color to something when you're doing your layouts either borders or background colors. We often don't have colors on stuff. It can be hard to see what you're working on. So doing that can be a really good first step. But once you've run into the problem just coming into your dev tools, you just click on this little icon here. And when you click on that, it lets you come through and highlight the different things on the page and you can sort of visualize things. You can see where there's margins. You can see the orange here. The green is my padding. And so we can just help you understand the layout and what's going on with it a little bit. That would definitely be the first thing I do, especially if it's a layout problem. But the other advantage with this is as I'm moving around first, you can see I get extra information like contrast ratios and other stuff. The font sizes font families and all of that are popping up. But I can find the area where I'm having my problems and I can click and it's going to select that element over here. And in this case, I know it's actually this one here the parent of everything where my problem is because I actually want these to be all next to one another and not stacked one on top of each other and clearly this isn't working. So I'm going to click on this job experience one here and doing that I see all the styles relating to it here. And I can already see some problems. There's an exclamation point there. There's great out stuff or like faded off stuff. There's crossed out things. And all of these are things that help us out tremendously. And this is how to debug your CSS is by looking at what the problems are here. So the first thing we do is hover on top of this and I see that I have an invalid property value. And that's because I made a very obvious typo here. But a lot of the time our typos are less obvious than this one, where you wrote something you don't see it, you inverted two letters on the long word or something like that. And the nice thing is I can actually come here and fix it and see that it works. But just know that any change I make here will not apply to my actual CSS file. There are ways of setting it up so you can modify CSS in the browser that will save to your actual code. We're not going to look at that today. I just want to look at how we can find the problem. And then you go back to your editor to actually fix the problems you're running into there. And now I've got this working. This is sort of the style I wanted with this horizontal scroll on purpose coming along there. And I'm very happy that I fixed that. The cool thing here is you can also turn things on and off to sort of see like if you made a change or you're trying to play with something and you don't know is my thing working or not working. This is a really nice way to find those things too or just experiment a little bit with your code. I'm going to turn the grid off here again, though, because this is another really useful feature in our DevTools is when we use things like justify content, your gap, our grid stuff, flex stuff, all these things, sometimes you forget to do a display grid. I do this surprisingly often considering how often I'm writing my CSS. It just is something I forget to do my display grid on, especially I add a gap because I want the spacing. Anyway, it doesn't matter why I do it. I do it. And then I go and look in it as soon as I see this grayed out. I know what it is, but we get these handy little things. And this is stolen from Firefox. This feature comes from there originally. I actually did a video a while back on why you should only use Firefox to debug CSS. But since making that video, a lot of those really good CSS features have bled into Safari and Chrome as well. But you can see here where it's saying justify content, this element is display block. So we can't use justify content. So same with my gap. We can't do it. Try changing your display to something other than block. So there we go. I put my display to grid and those come back to life. So this is really useful because it's not crossing them off because there's nothing wrong with these properties. They're just not properties that are working and it tells us why they're not working. So that's really good. Because in the old days, it would just cross it off and be like, no, this doesn't work here. And then you'd be like, but it is a property that it works and the value and there's no typos or anything. So it's really good now that you can, you know why the problem is there. Other times you're going to see things that are crossed off like my padding block that's right here. It's being crossed off and I go, well, that's weird. It should be working. And then I notice, oh, down here, there's another one. So anytime you have something that's overriding something else, and there's no typos with it, you'll just see it crossed off. And if it's crossed off, it means there's something else that's overriding it. It could be within the same selector lower down, like I've done here, and you can see that, oh, that's what I wanted. I didn't want this padding block here. That was a silly mistake. I only wanted that one. So that right away helps me find that problem and fix that problem. And then go back to my editor, delete that line of code, whatever it is I need to do. The other thing that can happen, though, is you'll see like if I scroll down, I can see this display block is being taken off because I have a display grid here. So now if I go down, now this one's actually working. That's my user agent style. So that's the default styles right there. You'll always see the selector at the top with the properties that are winning. So usually nothing in the top one is crossed off, unless you've turned, you know, you're toggling things. But if in the one that you're looking at something's crossed off, it means there's another thing within that same selector. So just a couple of little things to look out there for. Now, an interesting thing that's happened in my layout here, too, is that while I have horizontal scrolling here on purpose, I actually have horizontal scrolling here too. And that's kind of annoying. And let's we can exaggerate it even more right there. And this can happen. Overflows are one of those things that happen. And they're really annoying. And there's a few different ways we can approach it. I can actually do this within my DevTools. But this type of layout stuff with Overflows, I actually prefer not debugging within my DevTools. Though in this case, what's happened is at larger screen sizes, I don't have the issue. So I'm going to open the DevTools back up again. But I'm going to dock them on the bottom here, just to show you another tool that we have, because I get asked about this a lot, which is the responsive mode. So I'm going to click on here, and it opens up this responsive mode where we get this sort of thing going on. And there's a couple of things with responsive mode. It is also in Firefox is on the other side. So it's on the right side, not the left side. And the advantage with Firefox is you can close your DevTools once it's open and still use it. Whereas in Chrome, you have to keep your DevTools open. The other thing with responsive mode is when it gets smaller, it's going to prevent Overflows a lot of the time. So it's actually going to zoom out on the website. So I don't really see the overflow. I just see this weird thing where like my site seems to be zooming in and out. So if ever you're in responsive mode and you see the whole site zooming out as you get smaller, try turning off responsive mode, and then you're just docking your DevTools or playing with your browser and shrinking it and seeing if now all of a sudden you're getting some horizontal overflow, because that's probably what's actually going on. A lot of the time responsive mode is really useful. I use it all the time, but do know it's an emulation only. So it won't show you exactly what will be on the phone. This is really important to know. It's close, but it's basically just shrinking the viewport down. So even if you go in here and you're like choosing specifics, because you can choose specific devices, it's not going to be emulating that device. It's just giving you a rough approximation. So if you can always test on phones as well as on, you know, through responsive mode, but responsive mode is handy just for making sure general things are working fine. But I'm going to turn that one off just so we can look at this overflow issue here. And we're going to go jump on over to VS Code here for a second. And in VS Code, what I would suggest you do is on your elements, if you have a star selector or anything, you can do it there. I'm going to make a separate star selector. And there's two different solutions here is that I like. One of them is doing an outline of like three pixels solid and then choosing a color that's I'm going to do an orange red here, because I think it will stand out on my blue background. And the advantage of doing this is now I've highlighted everything and I can sort of go and start looking for the thing that's causing the overflow, which I can see right there. And that, you know, it makes it a bit easier to pinpoint the issue and you can see even when I go to here, I'm getting some overflow to and maybe it's from a different thing. And you sort of get there eventually and find the thing that's sticking out the side. And in this case, it's obvious that sort of this text is the problem. But sometimes it might be something different. You get like a box that doesn't have a background color or anything that for some reason has a width on it or has some extra margin that's causing some problems. This makes it a lot easier to find these invisible things that are sometimes sticking out the sides. There is a reason I'm using outline instead of borders as well is the border will add to the size of something. Even if you have the box sizing border box, that's where you're padding not your borders. So just be careful with that it will shift the size of stuff with borders, outlines don't shift the size of anything they don't have any impact on layout. So I would suggest using outline. There's one thing that can definitely happen when you do this is things can get a little bit overwhelming. So this is from joy of code, which is a really good website. And I'll put a link to the article where I found it. There's some short just useful articles in there, but there's some longer ones as well that go really in depth series on building stuff out. So I recommend you check them out. But they recommend doing things like this, where we're getting things that are nested a little bit deeper in. And the salute the good thing with that is when we use this, let's actually go five deep and see what happens with this one. So once you're five deep, you're sort of getting less things that are being highlighted. You don't get so many lines all over the place, which can just make it a little bit easier to find the specific thing that might be causing the problem. Because when you have too many overlapping lines and stuff, it can be really hard to visualize what's happening. And the other thing that I like doing here also is instead of using an outline is I'll use a background color that's transparent ish. So say we do background color, and I want something yellowy. So I think like a 50 should do. And then we'll do a 50% 50% and then like a 0.1. I have a comma here, we don't want that. And that'll give me a bit of a yellowy. And you know what, because it's yellow, and we're on a dark site here, I think I'm going to boost that up a little bit. But when I do that, you sort of the nice thing with this is you sort of start seeing the layers of different things, which can be really helpful as well. But once again, you can start seeing what's causing something to overflow. And you're doing it without impacting the layout. That's always the most important thing. Just because you don't want other things causing overflows along the way. And so for now, let's turn off that visualization because we really don't need it. And you can always have this as something that's commented, and you just comment it on and off as you need it. And it can be kind of handy as you're trying to debug stuff. Another place that I know people run into issues with though, other than with sort of the overflows and things like that, is when they're dealing with Flexbox or Grid. And so in my DevTools, again, I'm taking this and I'm finding the thing where I'm having an alignment issue. And I'm just clicking on it. So it highlights that here. And then you'll notice here's my display flex and then justify content, align items, my margin. And I get this icon thingy here. And I think this is only in Chrome. I don't think this is in Firefox. And it gives me these alignment things that I can sort of play around with. So I have my space between so I can see that, you know, I can see how that's changing this element here when I play around with that. So that can be useful to like, you don't know when to use justify content or align items. Because even here I have it set to baseline, maybe I want it to be top, I want it to be center, you can play around. And it's, you can see it's actually impacting all of these different things as I'm doing this, because this class is being used on all of these. And so that can be very useful to sort of play around with and change and see how it's impacting your layout, without just having to guess and throw random stuff at it, you come here and you play with it a little bit, and then you copy that back over to your editor of choice. And then over time, you learn these things. But at the beginning, you try one, you try the other, you get frustrated with it, it's nice to have sort of a visualization of how it might impact things. But you'll notice that when I'm doing this one, it's actually impacting all of them. Um, which is great. But when I'm doing it here, sorry, when I'm doing the space around, you can notice how it's only impacting that first one. And that's super frustrating, because I have spaces here, how come it's only impacting one of them? And once again, that's where this little tool comes in handy, I select the thing I want. And if I click on the little flex thing here, it's going to show me how flex is working. I have a short bit of text there, a short bit of text there. And so there's empty space. And the justify content is adding that space in the middle. So it's helping me visualize where that space is being distributed to on this next one. So I click there, click here, if you can't get the exact element, you click on one of them, and then you sort of just go a step up again. And then I click on my flex there. And because this text is longer, and it's actually having to wrap, it's using as much space as possible. And so is this one. So there's you can see through this visualization that there's not actually any space to be justified, right? Like that space between that would normally be able to go there. Well, it's not impacting here, because I have too much content. Whereas here, it was able to do it. So it just helps me figure out, okay, I understand why they're different now. What's the solution? Well, there you have to figure it out and maybe think about it. If I really needed these to be more consistent, I'd probably use grid instead of flex. So just something that I would think about on that front. But at least I can see why there's a difference because I have the little visualizer that's coming in and helping me there. And if ever you're having trouble seeing it, just because the colors, I think are random, if you go to your layout tab, you might have grid or flex at the top, but you have this flex box and grid layout tools, and you can just come and you can either turn them on and off, but you can also come and change the color to whatever color you want, just to make it a little bit easier to visualize, you can do the same thing for grid. And with grid, you can also do the same thing. Let's just come back up here a little bit to the job experience. That's where I had that original typo. So if I fix that one, just to say when you have the grid, you get the same controls that come here for manipulating and changing stuff along the way if you want them. Now I do want to show you one other thing. As I said, Firefox has an additional tool here that could be really, really helpful. So what we're going to do is if we jump on over to Firefox really quickly here, there we are. We're in Firefox. I have my inspector open here. A lot of these things are the same. You can see it looks very, very similar. But there is a important difference with this when we're looking at it, which is when we're in here, if I go to this layout part, and I'm in my flex container, if I go into the children that are in there, I can actually see these size things that are coming up. And this can be really useful because it's going to show me, in this case, you can see I had like a flex basis and there's like some shrinking going on and stuff. And so sometimes you're going to have like a max width that's preventing shrinking, or you might have a min width that's preventing growing and stuff like that. And you'll actually see that in here. Like if I go on my roll here, and I set this to have a min width of say 200 pixels or something like that. When I do that, I made that small, the content size is there. Let's make it at 300, just so it actually has an impact. You'll see that there's like a lock symbol that comes up now. So it's saying it would normally be shrinking smaller. But because I have a minimum size on there, it's showing me why it's not actually shrinking. And this can be really useful, just in figuring out sometimes with Flexbox, why certain things are working the way they are. And it's only in Firefox that we have this. And the other thing with Firefox is when you have overflows, the parent of wherever the overflow is does get this little like overflow tag on there, which can be handy. I don't have to like go like layer and layer and layer in. I'm just going and looking like, oh, there's an overflow here. So it's probably one of the direct children that are causing it. I don't find it's always perfect, but it helps me narrow down on where I should be looking for my overflows, which can be really handy. Now we're going to switch back on over to Chrome for this one, because I have the extension installed there. And I'm pretty sure it's also in Firefox that you can get it. But I have this extension called Visbug. And you can also just get it through your extensions panel. But I know mine's off screen. And it gives me all these things here, which can be really useful for debugging and playing around with and experimenting with stuff. So you can have like a move tool that if you have like Flex and Grid stuff, you can actually like move stuff around just with your arrows and stuff. It's kind of cool. There's margin and padding tools. There's alignment tools. There's just information tools that are really useful. Accessibility tools. One I like is measuring tools so I can actually measure the distance between different elements. So there's like 22. Maybe that should have been adjusted. What's the distance between my icons? Okay, that's 48. I know that's actually what was in the design. So things like that can be really useful just in making sure that your layout is working the way that it should be. And the spacing and everything is what you need it to be. You can even come in and like change content and change or this is font styles to change font sizes and other stuff. It's a lot of sort of exposing stuff that's in your dev tools, but sometimes not super easy to find and get extra information from. So it's a free extension that I definitely recommend checking out if you write a lot of CSS. And there's one other tool that I want to explore with you, which is this one, which might look very similar. And it's a Chromium browser under the hood. But it's called Polypane is a paid browser though. And you might be saying, why would I pay for a browser? It just exposes a lot of cool stuff. And I'm going to look at it really quickly with you. I won't even come close to looking at all the features here. But one thing you'll notice right away is there's this thing that's showing up at the bottom that actually tells me there's overflow. And it's responsive by default, right? So I don't have to come in and open my dev tools to get the responsive mode. So as we're getting smaller, when we get to a size where there's overflow, I get a warning, which is really cool. And just makes it, you know, so I'm not sort of wondering when there is or isn't, it just jumps out at me a little bit. But I'm going to jump over to this, which is where the joy of code site, because I want to highlight a few other things. This is where I got that simple trick. And you notice there's multiple pains opened. So I can look at my website at different browser sizes really easily, which is really nice for when you're trying to debug different problems, you'll know if it's happening only at certain sizes. You also they're like synced. So if I scroll on one, it scrolls on the other ones, you can highlight stuff, and it's highlighting it on all of them. So the hover is working and everything. I can actually see here, there's a little bit of an overflow issue. It's interesting. I wonder what's causing that because I don't see anything that's overflowing. Oh, maybe the image. So that is at a very small screen size. But just so you know, I'll let Matthew know who's the one who runs that site, or maybe he'll see this and take a look at what might be causing that. So a few things there, but even like I can open a menu and it's opening in both of them and stuff. So that's already kind of cool. Another thing that can be useful for responsiveness is there's a option where I can click on it and it will open the browser windows automatically or these different pains for the different break points that I have. So you can see at this smallest break point, which he has for 360, there's no overflow issue. So it was only at 320 that it was happening. But you get the different sizes here. So you can easily see your different break points and do different things with your media queries, which can be really useful. And of course, you can open the dev tools and play around with the dev tools in here. They'll look very familiar because again, it is chromium. And I can either do the dev tools in general, or I can actually go on one of the specific ones and I can do an inspect element of his bug that we were just looking at has the measuring stuff, you can actually set up like full grids here. So you can set up guidelines grids, column systems or rows, or whatever you want, just so you can make it, you know, you can easily see if everything is working the way it should be and is aligning to everything that you want it to be. And there's other really good features. And if you do a control G, you can even just open up rulers, you can sort of make sure and check your alignment on stuff here as well without putting full grids on everything that you have. And most importantly, there's a whole bunch of debugging tools that come in here. So there's like a layout debugging stuff where you're getting automatically all of the outlines appearing on things. You can see it just like we were looking at. So it's just like one click away that you can turn that on or off. There's things like unneeded scroll bars that you can highlight, which we're probably not going to run into here. You can check for accessibility stuff, you can edit content and check spelling, check readability, do a whole bunch of really useful things. I've looked at it in more depth in the past. So just throwing it out there, if you're looking for something that has sort of everything thrown together in one, and if you're working at a company, you might be able to get your boss to pay for it. So that could be useful. There is a link to it down below, but it is an affiliate link. So I'm just letting you know, but it is a really awesome product that I fully do believe in. And I use it all the time. So I would definitely recommend it if you want to sort of get a lot more features all packed into one. But if not, sticking with Chrome and Firefox gets you really far as well. So there's no problem with that at all. And if you do want to see the video where I built the site that we were looking at for most of this, this one right here with the horizontal scrolling and didn't have any of the problems that we were looking at along the way, that video is right here for your viewing pleasure. With that, I would like to thank my enablers of awesome Philip, Andrew, Simon and Tim, as well as all my other patrons 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.