Debugging CSS, no extensions required - Using your devtools

Whenever I use different DevTool features in my videos, I get a lot of questions about them in the comments, so today we’re looking at how we can simplify debugging your CSS by using different DevTools features.
🔗 Links
✅ More on DevTools on MDN: developer.mozilla.org/en-US/d...
⌚ Timestamps
00:00 - Introduction
00:36 - Opening your devtools
00:58 - Responsive mode
02:07 - The power of the Styles tab
04:44 - Working with hover and other pseudo-classes
06:02 - Playing around with the CSS
06:56 - Adding your own classes to the Styles tab
07:57 - Grid and Flex inspectors
10:26 - Firefox gives you extra context
#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 KZbin 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!

[@djshiva]

You are truly a treasure to the web dev community! I am learning CSS and this just blew my mind!

[@GoodheadOffical]

I was literally thinking about the same topic today 😅 i didn’t realize till now how much more Firefox can give when it comes debugging, thanks a lot!

[@HariHaran-ef7pr]

I am also discussed with my team and here is the video about css overview 😬

[@the-real-tridder]

I came here for the learning, realised I already learneded all this stuff by myself, stayed because its awesome information, and commenting for the algorithms! Every web dev or aspiring web dev needs to know how easy it is to debug their css. Thanks again for making such useful content!

[@drochleprechaun]

I use all of these tools every day, but I learned a bunch of little tricks I've somehow overlooked over the years. Very informative, thanks for the great tips!

[@JosephCodette]

You can also adjust values in devtools by using arrow keys . So for example a style has px values you can click on it and increase or decrease . Handy when you want to see real-time what a value will do

[@yandev6956]

Even better is using scroll wheels instead of arrow keys. It can help a lot to quickly style something.

[@robin.journal]

Thank you for another helpful video sir! I appreciate your efforts to bring us quality tutorials 😊

[@zorokutend]

In the dev tool, you can enable some features for better debugging CSS in the settings ( the gear icon on the top right of the dev tool). For example, in the preferences, scroll down a little bit to the section Elements, you can enable the "Show rulers on hover" feature to line up your elements without extension. Or, you can add some presets to your preferred responsive devices when debugging in responsive mode.

[@Marty72]

Worth sticking around for the Firefox tips at the end.

[@clevermissfox]

Chrome now has the greyed out align-self [this element is not a grid or flex child]. Just happened to see that exactly this morning when I thought I had grid on its parent. Very helpful. I ❤ dev tools! The animation tab is extremely extremely useful. As is the ability to mess with your timing functions! I had no clue there is a clip-path tool too? What else don’t I know that I don’t know??!

[@JoshLearningFrontend]

If someone say CSS is frustrated i recommend your channel

[@francescovetere]

Thanks Kevin! Your content Is always top notch, you are my main reference and inspiration! :)

[@matthewreid1580]

So much cool stuff! Thank you! I knew about the style tab years ago. I worked at a daily newspapersnd would "change" the home page on my machine and call my co-workers over in a panic just to see their reactions.

[@XiagraBalls]

That FF tip at the end will be super useful; everything else I knew already.

[@thkorkem]

Firefox devtools seems amazing, thanks a lot!

[@frankroos1167]

A few more useful details I didn't know yet. Thank you master Kevin.

[@waspishbobfish]

Love your videos. Coding my first project right now in vscode and struggling with things not working when i think they should. I've been using chrome and am immediately switching to firefox!!

[@pixiedev]

RESPECT, A helpful video, it saves alot of time while working with css. 😊

[@NemilSheriff]

Thank you so much for sharing this!!

[@bobobo1673]

Great video Kevin! You are helping me a lot to learn, thank you! I'm glad I found the grid and Flex stuff because I'm stuck doing a sticky scroll of a grid column and I can't find anything about it. Let's see if this helps me. Greetings

[@AvalonRishiFamily]

Oh, wow, I didn't know these things even exist. Thank you for so many treasures in just one video! God bless you

[@brandon_wallace]

Great video. Thanks for this.

[@Boganbrump]

Hey Kevin! Hope you find this. I did the free scrimba course you did for HTML and CSS. I then used what I learnt in my university assessment and got a High Distinction. Been a fan for a while 😃

[@ZeeJohansen]

Didn't know about the breakpoint visualisation option or the information box in Firefox. But I usually spend maybe 60 - 80 % in the DEV tool than in my editor when styling. Right now I'm even testing prototypes for my works live Shopify page, where I edit the HTML and enter my CSS to see how it integrates with Shopify's div and CSS hell 🤣🥰

[@abusid966]

Great inform for all developers

[@AdamFiregate]

Thanks for the Firefox tip, Kevin.

[@liselle8932]

This is fabulous, thanks!

[@luketurner314]

I don't remember if Kevin demoed it in another video already but... when editing a numerical value in the dev tools you can scroll the mouse wheel to increment and decrement. If you hold shift and scroll, it increases/decreases by 10's; alt and scroll for 0.1's

[@gmos.99]

I mentioned on discord but I'll mention it here again, I was just watching this video and just by looking at your screen at 4:37 made me realize what was wrong with the responsive part of a project I was working on for a week! Thank you so much for that!!!

[@ezekielswanson7813]

Your videos are amazing!

[@EddieBeaumontThomas]

I use both Chrome and Firefox's dev tools. I particularly like that Firefox shows JS event handlers; very helpful..

[@serveshchaturvedi2034]

Hi Kevin. Thanks for this awesome video. Would be helpful if u made a similar one for the css animations using dev tools

[@sovereignlivingsoul]

thanks kev, i do use the dev tools everytime i am coding for some reason or another, but this video was great for reminding me to maybe us them before i have an issue and for testing, one thing i hate s making a change or two and after deciding it wasn't what i wanted, i wlil undo everything and for some reason things are out of whack, that's when the dev tools can be very handing if i can't find the error in the code myself, if you are using chatGPT, you need dev tools, don't know about anyone out there, but i don't think chatGPT could code a button without an error.

[@verawat]

Thanks Kevin. I love you every day.

[@hassaneoutouaya]

Thank you so much!

[@Andreterragt]

Oh man. CSS is so incredibly frustrating and annoying for beginners. It seems like you are setting 15 different parameters to "center" and is still not centered. Debugging videos are greatly appreciated. I'm stuck with debugging all the time.

[@jenasusil6]

Thanks Kevin for your valuable content. by the way which font are you using ? it looks awasome.

[@steveportas7961]

I would also be intrested in seeing you set up.

[@15-gimenajohnbriann.40]

I did not think of using browser as a debugger, thank you it really help me so much

[@mrpicbuddy5723]

it work on my pc thx bro vеry much

[@victorlosadahernandez7125]

You should do a video about the new dev feature, CSS Overview!

[@sarpfeykunsener4070]

thank you bro thank you

[@davidjohnsonny]

OMG great shirt!

[@maerosss]

The way I style nowadays is basically create html, load it in browser and then just style all of it right in browser. When I'm done, I just paste it all into css ;-)

[@nikhiltyagi6619]

Thanks a ton!! You're awesome as always. Can you do a short video on how to make a basic html css javascript website GDPR compliant? I made a website for a client in UK and have Google analytics tracking turned on. How do I apply a cookie consent system on the website?

[@KalpeshPanchal]

Thanks Kevin for sharing this with everyone. All good except that you used few bad practices while presenting debugging.

[@Davyhatesu]

KEVIN IS THE FRONTEND G O A T!!!!

[@ayaanshaikh6374]

11:53 this is also added in Chrome, and it helps a lot

The subtitles finally got it right "front end friends". I think this is the first time lol

[@BjarneOldrup]

I already have fallen deeply in love with Kev.... CSS! ... CSS is mostly very lovable. Specificity does get on my nerves sometimes, though. Any idea if it is possible to calculate the specificity of a selector in any of the dev tools?

[@mohsinkhan-wv4fu]

i am always use that for debugging css

[@cerstar5725]

I didn't think I knew all of this already, Great video like always

[@Eternal_Rise]

Could you also make a video about animations tab?

[@pedzsan]

I clicked on this video but it was not what I was looking for. So… perhaps this is a suggestion for a future video. Today, I had page that I was working on. I’m very novice at CSS. And there was a “thing” (turns out it was padding) that was causing an icon to be moved over to the right. Where is it? Who is doing that? It took me “a long time” (seemed like) to figure out where that padding was coming from. And while it all seems “Dah!” obvious after you figure it out… it isn’t obvious before you figure it out. So… the suggestion for a video would be how do you figure out why your CSS isn’t doing what you expect it to do? What I ended up doing is getting into dev tools and turning things off until it finally jumped back left … but there’s gotta be a better way… I would hope.

[@landa9620]

ty master

[@-_._._-]

5:14 I find that there are some pseudo classes (like :hover and such) that exist now, that aren't listed on the dev tools and as a result, it's impossible to get them to stay displayed so I can style them. I can't recall the ones I've seen before off the top of my head, but I've run into them while working on a MediaWiki dark mode project. If memory serves, one of them was a pseudo-class related to checkboxes. I was trying to restyle the various checkboxes. Some of the checkbox had some weird styling in some of their new-ish pseudo-classes that I found hard to locate in the dev tools

[@KevinPowell]

For some, like say @media for dark mode or light mode, or high-contrast, you can use your dev tools to emulate one or the other, which would activate the media query and you'd see it in the dev tools then.

[@-_._._-]

@@KevinPowell my dark mode skin (TF2CutContentWiki/TCRFDark repo on GH) was for The Cutting Room Floor Wiki (video game cut content wiki) and it was a "Bespoke" creation where I didn't take what I'd call "shortcuts" like inverting the colors on everything. I literally went through every page I could think of and recolored elements by hand. As for the unlisted pseudoclasses, I think the pseudoclasses I had trouble with were related to checkboxes. There's some new-ish pseudoclasses for inputs that aren't listed alongside hover, active, visited, etc in the dev tools. Makes it hard to single those pseudoclasses out like you can with hover/active/visited.

[@-_._._-]

@@KevinPowell aha, I remember which pseudoclass it was now. ":checked" was one I had trouble restyling. There's a whole slew of pseudoclasses that aren't represented on the dev tools window. Is there any way to modify that list and add new pseudoclasses to be able to force-display?

[@LzysGraphics]

@@-_._._- we’re you not able to click the checkbox? If it was inaccessible you could also have tried to manually check it either by adding ‘checked’ in the HTML tag or in JavaScript

[@shivamrathore8291]

Hey, thanks for the video. (apart from video's topic) I am in a little bit of confusion in CSS CONFUSION : can we edit/modify the input box blinking cursor I want to change the input box cursor blinking animation style from blink to expand (like VS code) is this possible? if yes then please make a video or at least tell me how can I achieve this??, if not then why??

[@kiravolvo]

hi kevin. thank you very much for the video. quick question. how do you make devtools tab zoom in with 1 click? i can only find how to increase font size. thank you

[@KevinPowell]

Click inside the dev tools, and then ctrl + or ctrl - zooms in and out (guessing it's cmd on a mac)

[@kiravolvo]

@@KevinPowell thank you.

[@DNAwastaken]

For some reason, Cmd+Shift+I doesn’t work on my Mac. Instead, I use Cmd+Option+C. It’s also a plus because the keys are so close together, and you don’t have to reach all over the keyboard to open “inspect element”

[@dmoralesz]

try option + cmd + i

[@jesutobitobi7588]

Hello Kevin, thanks for this video... I would to know if you know of any open source projects front end devs can contribute to

[@lookupverazhou8599]

Thumbs up.

[@noclistify]

Watching Kevin for years now but I finally realized it's "Hello my front end friends", not "Hello my friend and friends"

[@PedroPisandelli]

Good old days of Firebug... the web development was never the same after it.

[@keremardicli4013]

How can we see @print? I have dynamic page where print co tent changes based on selection, I wanted to see @print query results but could not find a way.

[@KevinPowell]

Open the dev tools, then use `ctrl + shift + p` to open the command pallet, and type in "print" there, and it should show you an "emulate print" or something like that, that you can then enable. (would be cmd instead of ctrl on a mac)

[@Sashad2003]

I'm your first 🥇 viewer today 😉👍

[@prasannakumar-kf2pl]

Hey Kevin, myself prasanna from India 🇮🇳 and i am a junior front end developer I have an doubt on Impleting fonts in our web pages. How I actually do is by using font face with font extensions like TTf, otf, woff, woff2 font files Is it right way to do? Or is there any something more effective than this way

[@lenninpalacios]

I dont know if can compete with our 1px solid red.

[@badcatdesign]

@7:46 Edge DevTools extension for VS Code has this cool thing where you can link the CSS changes back to the source and actually save them. kzbin.info/www/bejne/foPTeJKCgd1jnKs it's pretty slick.

[@krishmehta7903]

if we dont know color code of the certain part of website , chrome devtools color picker , we can find any color code of the website ( without any extension download )

[@gg-gn3re]

firefox has this too, several years before chrome added it. And it's on by default. ff's dev tools are generally far better than chrome except in some niche cases

[@krishmehta7903]

@@gg-gn3re yeah man

[@VinaySingh-jm8iw]

Can you debug the video title?

[@KevinPowell]

haha, surprised you're the first to mention that! Thanks, fixing it now!

[@lucaslindgren3237]

I'm so early!

[@RhayvenBlood]

Urgh. I dont think FireFox has quick grid/flex controls like chrome does lol. Would save me a lot of time X_X

[@JamesBlackburn]

@Kevin Powell, ( kzbin.info/www/bejne/pJXIdJ-krq2GpZo ) the three dots are called an ellipsis.

[@PaulMcCannWebBuilder]

Also known in the UI design world as a 'kebab icon'.

[@JamesBlackburn]

@@PaulMcCannWebBuilder Haha. True! Hamburger and Kebab... mmmmm... food! 🤤

[@mirzaumair8411]

I am😁 the first

[@GoodheadOffical]

3rd