How I find and debug issues in my CSS
Vložit
- čas přidán 1. 06. 2024
- If you’d like to dive deeper into your dev tools, I have a two-hour bonus lesson as part of my course CSS Demystified that dives really deep into all the CSS related features and tools that we have, and how to use them: cssdemystified.com?
🔗 Links
✅ VisBug for Chrome: chromewebstore.google.com/det...
✅ Visbug for Firefox: addons.mozilla.org/en-CA/fire...
✅ Polypane: polypane.app/?ref=kevin (affiliate link, so if you do purchase, you’re also helping support my channel)
⌚ Timestamps
00:00 - Introduction
01:00 - Dev Tools basics
03:40 - Typos and invalid properties & values
05:08 - Valid properties in places they won’t work
07:42 - Responsiveness, overflows, and layout issues
09:47 - Finding overflows with outlines
12:00 - Using background-color to find overflows
12:45 - Devtools features for working with grid and flexbox
16:20 - Firefox can extra visualizations that can be useful
18:12 - VisBug
19:28 - Polypane
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Kevin, you've changed my life. I found a nice person who teaches me CSS extraordinarily well. You are a special person! Thank you very much!
thank you so much! 😊
Final year of Software Engineering, myself and so many other students definitely owe you a beer and partial ownership of our degrees when we graduate, thank you Kevo!
Haha, thanks! Good luck in your final year, and the upcoming job hunt!
A shortcut I use daily with the dev tools is "CTRL+SHIFT+C". It puts the browser into "Pick an element from the page mode" Then you click on an element in the content, if your dev tools are not open, it'll open the tools and it focus on the related code. I like that this will take me directly to the HTML and related CSS in the dev tools. I use this shortcut dozens of times a day. Thanks for everything here Kevin. I've been writing web content and web applications for nearly thirty years. Yes, NCSA Mosaic was my first browser, and a plain text editor my first "IDE". Still, I learn something new from you with nearly every video! Thank you!
If you focus on a part of the page and right click and choose inspect it will open the dev tools elements tab focused on that exact tag. Your method is better if you cannot see or pinpoint something on or off of the screen to focus on the element you want to inspect, but right clicking is quicker when you can point right at the object.
On Mac, it's Command + Option + I. By the way, I'm a veteran CSS developer/designer, and I've still learned so much from your channel. Thank you!
I like that in your videos you often explicitly say what you actually do and why, even if it may be obvious thing, but for those it doesn't bother them and for newbies it is so so helpful :) those little mostly untold secrets are sometimes actually really important :)
That outline and background-color trick is really neat, definitely gonna be using that a lot 😄🙏
I knew the backgound-colour trick, but using the outline (not border) was new to me. Really smart. Sometimes it's the little things that make a huge difference. Thank you for sharing, Kevin. And may I add: You are such a lovely sunshine. CSS can be really frustrating to me, especially when trying to figure out why something is not behaving as I wish. So watching your friendly, inviting and encouraging videos spark again my motivation. 😘
In desperation I have added * {border: 2px dotted red;} to see/find every element.
I love your content, Kevin. And super honored you used my UI on this episode. Can you do something diff? like an office set up haha
Great to see Visbug some love! Kicked off by Adam Argyle!
Your videos are consistently the best teaching tool for me to learn. Thank you so much
This was very helpful, thank you Kevin!
Thanks Kevin. Extremely helpful as always!
such a VALUABLE video!! Thank you!
Nice, what a great tool for debugging and for trying different setting!
Thanks for the information especially the VisBug extension!
Wow this is very helpful Mr Powell. Thanks alot.
great video, very useful.
thanks
Awesome video and glad to know that I use almost all of these features (chrome).
I wonder if you can do a video on page layout shifts and how to fix it using these methods if at all possible. I have an example site I can share if needed but I'm sure you can find some. Thanks Kevin!
Because of you I started creating websites again, I created an HTML and CSS site for a pet store, I took a web design course 15 years ago, it took me about 3 months to feel comfortable creating something.
Now I just need to start investing in javascript :)
It depends on the level or scale you’re aiming at: but this goes for many scenarios: maybe you shouldn’t invest too much in Javascript: just the basics can be enough to write the right prompts and check the code generated by Copilot, ChatGPT or any other code buddy you’re going to use.
At 10:18 Really Helpful.. Thanks 😊
Hey Kevin loving the videos, I'm currently struggling to curve text around a circled IMG. Do you have any suggestions
Great overview and a few new tipps - thanks a ton! 🙏
Just shared one of you videos with a collegue who found it very helpful.
One question, maybe even a request: have you ever looked into options to do automatic testing of CSS, layouts etc? Anything to recommend?
Thanks & best regards!
CSS testing is a bit limited. There are regression testing tools out there, but you always need to have images to compare things too, which limits their uses imo.
@@KevinPowell thanks! Thought as much... My colleges actually insist that even ui testing is Impossible 😁
I think it would begreat to have something that compares git commits over all pages of the project, so you know yourchange for the imprint did not touch the landing page...
thank you
Kevin, your content is always useful, I've learn a lot from it. I have one question, is it fine if i teach and use knowledge i gain from your channel to my personal blog or even youtube to teach people in my country? Surely my main focus is about teaching in technical way, not about duplicating your content.
Yes, absolutely 😊
Can you please tell me where I can find out how to save my css file when making changes through the dev tools? Thanks, I love your videos.
Hi, im not sure but did you already made a video about topic of cross device css issues? For example that something is working on Android but not on IOS?
I think sometimes using border instead of outline can help to find the element that is or is not box-size the same as the others.
Check and uncheck the rule over and over again until you can figure out which element is still shifting or is not shifting as expected.
Just today, I have a div in a Laravel blade component that just won't take a background color. It is a very simple block and when I recreated it, I made it work. But when I used color variables, the variable shows the correct value in dev tools but doesn't change the div. Once I use the color variable, the div will no longer take any background color assignment even a direct hex code entered in dev tools. I have to rebuild the component.
Can you make a video about tools for frontend engineers, such as emulators, testing, etc? I’m a frontend junior and I’ve ran into issues with different renderings on different browsers
I might have a lot of problems to solve because I know in Chrome inspect can be opened by opening the menu on the item you're debugging and instead of moving the cursor to the "inspect" option in the menu press "n" on firefox press "q"
Kevin please guide me.. I want to learn HTML AND CSS from ur channel i want to start it right now.. In which manner i will follow ur playlist connectively to master in html and css.. Csn u plesse reply me.. From which playlist i have to start and after that one by one which playlist i have to follow. Can u please guide me 😢
Hi Kevin - Hoping that you can answer my random question: Should I still use BEM and SASS in 2024? Any help would be greatly appreciated.
Is there an extension that could help with this before we even get to this point?
How about debugging a css style that didn’t work with a class link? Especially with from a few nested classes… imagine closing a notification message like you could find on a wikimedia site.
Or.. You can do what I did this weekend. I just copy and pasted the CSS and HTML file into Claude and asked it to debug the file with a well thought out prompt. It finds the errors and offers solutions and explanations. As I went along designing and adding features with my new found powers, including adding a cool mp4 using and ::before / ::after psuedo elements ( again, I learned this from Claude whilst experimenting) background video in a log in form, anytime I wanted to make a change or add a feature, I just prompted Claude. It gave me the fixes and the changes that I wanted, all within seconds. It also explained what the problems were as well and explained what it had done and why it did it. My confidence and knowledge grew with continued success instead of frustration. I was also able to get Claude to look at two pages one page had the design that I wanted but the class names were different, the other page had my class names for the elements. Claude not only created a translation table of corresponding class name to elements for each document If I wanted to hand code changes, Claude replaced all of the class names and attributes within seconds, enabling me to combine stylings from two different WordPress websites. Claude then wrote the PHP for me to be able to use the page and nonce, and offered JavaScript for additional functionality and advice for setting up my back end to create something even better as my ideas flowed. It validated everything as well. I don't understand why we use an IDE to create code for browsers. Code creation that renders on browsers should be created by browsers.
Modern editors and tools like stylelint help finding some bugs without even opening page in browser. They find all typos and wrong values and scream at them with red lines.
For the outline: 3px solid red, do #f008 (half transparent red) instead. This helps with visualizing overlapping lines, usually from nesting elements
Edit: oh, you kinda did it with the background-color.
make a video on how elements overflow even when you set overflow-y-auto.
...but they won't overflow then? 🤔 - Do you have an example?
You definitely use F12 it is the easiest for me I have it on my computer and both ctrl buttons lol
Hello Your Videos Are Really Great I think You are Troubuling With Video Editing And and its a Very Long Time Taking If, You Agree So Me And My Team Help to edit Your Videos And Make Highly Engaging.
Me again
👋
CSS is OK, I guess.
😅 right now i have to work with csss 2.1 to make pdfs i wanted to due zeveral times already
Haha, I remember those days :D
border-red-500