Debugging CSS, no extensions required - Using your devtools

[@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!

[@Marty72]

Worth sticking around for the Firefox tips at the end.

[@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!!!

[@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.

[@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.

[@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.

[@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??!

[@thkorkem]

Firefox devtools seems amazing, thanks a lot!

[@47joshua]

If someone say CSS is frustrated i recommend your channel

[@AvalonRishiFamily]

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

[@frankroos1167]

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

[@XiagraBalls]

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

[@Inarahsdiary]

Great inform for all developers

[@francescovetere]

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

[@AdamFiregate]

Thanks for the Firefox tip, Kevin.

[@robin.journal]

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

[@15-gimenajohnbriann.40]

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

[@liselle8932]

This is fabulous, thanks!

[@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 😃

[@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!!

[@NemilSheriff]

Thank you so much for sharing this!!

[@EddieBeaumontThomas]

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

[@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.

[@brandon_wallace]

Great video. Thanks for this.

[@ezekielswanson7813]

Your videos are amazing!

[@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 🤣🥰

[@verawat]

Thanks Kevin. I love you every day.

[@pixiedev]

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

[@jenasusil6]

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

[@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

[@serveshchaturvedi2034]

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

[@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

[@hassaneoutouaya]

Thank you so much!

[@randomuploaderguy]

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.

[@randomuploaderguy]

@@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.

[@randomuploaderguy]

@@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]

@@randomuploaderguy 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

[@cerstar5725]

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

[@victorlosadahernandez7125]

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

[@steveportasUKUS]

I would also be intrested in seeing you set up.

[@sarpfeykunsener4070]

thank you bro thank you

[@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?

[@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.

[@davidjohnsonny]

OMG great shirt!

[@ayaanshaikh6374]

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

[@Beingbasu]

Bro how tell me are you saying about Ai assistance in devtool or what. I'm new just started all this

[@mrpicbuddy5723]

it work on my pc thx bro vеry much

[@Davyhatesu]

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

[@Eternal_Rise]

Could you also make a video about animations tab?

[@NikitaDrokin]

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

[@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 ;-)

[@BrunoMussoi]

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

[@mohsinkhan-wv4fu]

i am always use that for debugging css

[@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??

[@KalpeshPanchal]

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

[@noclistify]

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

[@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

[@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.

[@lenninpalacios]

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

[@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

[@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)

[@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

[@Sashad2003]

I'm your first 🥇 viewer today 😉👍

[@VinaySingh-jm8iw]

Can you debug the video title?

[@KevinPowell]

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

[@lookupverazhou8599]

Thumbs up.

[@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.

[@PedroPisandelli]

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

[@lucaslindgren3237]

I'm so early!

[@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! 🤤

[@RhayvenBlood]

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

[@mirzaumair8411]

I am😁 the first

[@GoodheadOffical]

3rd