How I find and debug issues in my CSS

hi there my frontend 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 their 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 confident 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's 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 uh 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 um 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 to 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 the 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 F12 but my keyboard doesn't have an F12 on it so I just use my control shift I uh once you've opened up your Dev tools it is possible if you the shortcut that you're on a different pane than I'm on and it might also be on the bottom or on the left cuz you have this little thing you can change where your Dev tools are docked uh around the sides there I'm going to bring this back over onto the right uh just for what we go through here and you can zoom in and zoom out in here um pretty well Firefox does have a bit of a limited Zoom of what you can do uh 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 uh 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 youve run into the problem just coming into your Dev tools you click on this little icon here uh 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 uh the green is my padding and so it 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 grade 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 I'm going to 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 uh where you wrote something you don't see it you inverted two letters on the long word or something like that uh 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 F 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 would go back to your Editor to actually fix the 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 uh 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 you 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 uh I'm going to turn the grid off here again though because this is another really useful feature in our Dev tools is when we use things like justify content your gap on grid stuff flex stuff all these things sometimes you forget to do a display grid I do this surprisingly um often considering how often I'm writing my CSS it just is something I forget uh to do my display grid on especially I add a gap cuz I want the spacing anyway doesn't matter why I do it I do it and then I go and look and as soon as I see this gray 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 um but you can see here where it's saying justify content this is a dis this element is display blocks so we can't use justify content uh 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 CU 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 uh CU 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 uh 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 overwriting 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 overwriting 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 the 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 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 top one is crossed off unless you've turn 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 unless we can exaggerate it even more uh right there uh 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 and I could actually do this within my Dev tools but this type of layout stuff with overflows I actually prefer uh not debugging within um my Dev tools uh 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 dev tools back up again but I'm going to dock them on the bottom here just to show you another tool that we have cuz 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 things with responsive mode it is also in Firefox is just on the other side so it's on the right side not the left side uh and the advantage with Firefox is you can close your Dev tools once it's open and still use it whereas in Chrome you have to keep your Dev tools open uh 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 the whole site zooming out as you get smaller try turning off responsive mode and then you're just docking your Dev tools or playing with your browser and shrinking it and seeing if now all of a sudden you're getting some horizontal overflow cuz that's probably what's actually going on but 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 uh it's close but it's basically just shrinking the viewport down so even if you go in here you're like choosing specifics CU 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 uh you know through responsive mode but responsive mode is Handy just for making sure General things are working fine uh 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 VSS code here for a second uh 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 a separate star selector and there's two different solutions here that I like uh 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 uh cuz 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 um and that you know it makes it a bit easier to pinpoint the issue and you can see even when I go to here here uh I'm getting some overflow too 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 um 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 uh outline instead of borders as well is the Border will add to the size of something uh even if you have the box sizing border box that's for your 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 uh 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 uh articles in there but there's some longer ones as well that go really In-Depth series on uh building stuff out so I would recommend you check them out um but they recommend doing things like this where we're getting things that are nested a little bit deeper in and the Sol the good thing about that is when we use this let's actually go five deep and see what happens um 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 transparen is uh so say we do background color and uh I want something yellowy so I think like a 50 should do um and then we'll do a 50% 50% and then like a 0.1 uh 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 um but when I do that you sort of the nice thing with this is um you sort of start seeing the layers of different things uh which can be really helpful as well but once again you can start seeing uh what's causing um something to overflow and you're doing it without impacting the layout that's always the most important thing um 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 you could always have this as something that's commented and you just comment it on and off as you need it uh and it can be kind of handy as you're trying to debug stuff uh another place that I know people run into issues with though other than uh with sort of the overflows and things like that is when they're dealing with flexbox or grid um and so in my Dev tools 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 uh and then you'll notice here's my display flex and then justify content align items on 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 uh 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 U 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 could be very useful to sort of play around with and and change and see how it's impacting your layout uh 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 uh 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 uh sorry when I'm doing the space around you can notice how it's only impacting that first one and that's super frustrating cuz 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 Justified 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 um 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 CU 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 a solution well there you have to figure it out and and maybe think about it if I really needed these to be more consistent I'd probably use grid instead of flex um 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 um that's coming in and helping me there and if ever you're having trouble seeing it just cuz 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 these Flex box and grid layout tools and you can just come and you can either turn them on and off 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 you can also do the same thing let's just come back up here a little bit um to the job experience that's where I had that original typo so if I fix that one um just to say when you have the grid you get the same controls that come here for manipulating and changing stuff uh along the way if you want them now I do want to show you one other thing um as I said Firefox has an additional tool here that could be really really helpful uh 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 um I have my inspector open here a lot of these things are the same you can see it looks very very similar uh but there is a important difference with this uh when we're looking at it which is when we're in here if I go to this layout part um 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 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 uh or you might have a minwidth that's preventing growing and stuff like that and you'll actually see that in here like if I go on my roll here uh and I set this to have a Min width of say uh 200 pixels or something like that um when I do that I made that small the content size is there let's make it at 300 um just so it actually has an impact uh you'll see that there's like a lock symbol that comes up now so it's saying it 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 uh just in figuring out sometimes with flex box 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 uh which can be handy I don't have to like go like layer in layer in 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 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 uh to Chrome for this one cuz I have the extension installed there and I'm pretty sure it's also in Firefox that you can get it um but I have this extension called visz buug and uh you can also just get it through your extensions panel but I know mine's offscreen and it gives me all these things here uh which can be really useful for debugging and playing around with and experimenting with stuff um 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 uh 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 ey cons okay that's 48 I know that's actually what was in the design uh so things like that can be really useful just in making sure that your layout is working the way that it should be uh and the spacing and everything is what you need it to be you can even come in and like change content and change um or this is font Styles uh to change font sizes and other stuff um 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 would definitely recommend checking out if you write a lot of CSS and there's one other tool that I want want to explore with you which is this one which might look very similar and it's a Chromium browser under the hood uh but it's called poly pane this is a paid browser though uh and you might be saying why would I pay for a browser uh 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 uh 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 uh 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 uh when there is or isn't it just jumps out at me a little bit um but I'm going to jump over to this which is where the joy of code site um because I want to highlight a few other things this is where I got that simple trick and you notice there's multiple panes opened so I can look at my website at different uh browser sizes really easily which is really nice uh 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 um I can actually see here there's a little bit of an overflow issue that's interesting I wonder what's um causing that cuz I don't see anything that's overflowing oh maybe the image um so uh that is at a very small screen size but just so you know I'll let Mattia know who's the one who uh runs that site or maybe he'll see this um 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 it's opening in both of them and stuff so that's already kind of cool uh 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 panes for the different break points that I have uh so you can see at this smallest breakpoint uh which he has for 360 there's no overflow issue so it was only at 320 that it was happening um but you get the the different sizes here so you can easily see your different break points um 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 uh 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 now VI 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 um 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 uh and there's other uh 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 uh that come in here so there's like a Le layout debugging stuff where you're getting uh automatically all of the outlines appearing on things so you can see it just like we are 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 uh which we're probably not going to run into here uh you can check for accessibility stuff stuff you can edit content and check spelling check readability uh do a whole bunch of really useful things I've looked at it in more depth in the past so just throwing that 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 can be useful uh 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 uh 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 uh this one right here with the horizontal scrolling and didn't have any of the problems that we were looking at uh 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

Channel: Kevin Powell

Views: 26,013

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial, debug, css debug, debugging, css debugging, dev tools, css dev tools, devtools, inspect element, responsive mode, chrome, firefox, Polypane, Visbug, overflow, css overflow problem, css overflow how to find

Id: xWvS8OvgyiA

Length: 23min 28sec (1408 seconds)

Published: Tue Apr 16 2024