How to debug CSS with Firefox Developer Tools

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
In this video I show you how to use Firefox Developer Tools to debug and troubleshoot your HTML and CSS.
Firefox Developer Tools Documentation - firefox-source-docs.mozilla.o...
00:00 - Intro
01:00 - Turn on developer tools, main UI in the dev tools panel
02:12 - Markup View, search, and edit HTML
08:15 - Color picker
08:48 - Breadcrumbs bar
09:21 - Rules tab
16:04 - Layout tab, grid and flexbox inspector
24:05 - Computed tab
26:16 - Changes tab
27:49 - Fonts tab
29:44 - Navigating tabs and 3-panel view
30:48 - Responsive Design Mode
34:06 - Network tab
36:35 - Accessibility tab
40:39 - Storage tab
____________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard, Vissles V84 -- vissles.com/?ref=mu96kxst5w -- 🔥 get 10% off with code THECODERCODER --
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

[@recursion.]

Great video fr fr no cap ong type shiii

[@icoderdev]

Finally 🎉🎉🎉🎉🎉

[@CuriousByte]

Welcome back! Don't see many deep dives on this topic, look forward to it :)

[@ksubramanyeshwara]

Please bring a chrome dev tools course for debugging JavaScript, ReactJS

[@SachinYadav-eh7vg]

Eagerly waiting for your course

[@mirjalol_shamsiddinov]

omg, finally we can see u again, pls upload more, especially about responsive design

[@SlimBloodworth]

This makes me so happy! I really enjoy your videos! They are alwaya well done, and the information is presented in such an unstable way. Congrats on getting the new course worked out, as thank you so much for the video!

[@farzadmehrava43]

finally after a long time !!! happy to see the notification from your channel !

[@Aratolotl]

THIS was the video I was looking for. I handn't been able to find a video that fully explained dev tools til now. 👍

[@PeaceOutILoveMrYoung]

Welcome back! Hope you're doing well!

[@AbhishekVerma-gg4hf]

Glad to see you again !!!!

[@bestbrain06]

Finally after 9 months coder coder is back 😊🎉🎉🎉

[@Atamasa1]

Yes!! You are back! I was a little bit worried 😅

[@dbhatta9943]

Hey! It is nice to see your videos again!

[@the7odmelmoney]

Thank you. I am using Firefox for now on.

[@internetbuilder2055]

Finally coder coder is back 🎉

[@mkitche3]

Welcome back! Was hoping there would be a return for the GOAT!

[@ssava_ema]

Welcome back have been missing your teachings. It is time I learn more staff.

[@michaeleaster1815]

This is super-useful: thank you so much! I'll be revisiting this video often...

[@farzadbahadorifar1126]

Welcom back, thanks for making this awsome tutorial video

[@seekherm4097]

Welcome back our best teacher🎉

[@codernerd7076]

Welcome back, I was worried 😢 happy you're ok 🎉

[@user-rl6mq8cc1q]

Awesome video! What do you use to record with?

[@yaroslav1146]

This is a very useful video. Many people avoid this topic. Thank you!

[@swietoju]

Yay, you are back!

[@yashjaiswal2335]

Guess who's back???!!!!! Back again!!!!!

[@user-bh9mg1id1p]

you are best. Keep going

[@dannx3144]

hi!! i missed u and ur content, thank u sm!

[@approxahmed]

Welcome back 🎉🎉

[@xSatanisticx]

Good to see you!

[@pixeldropdigital]

You're back 👍

[@nyashachiroro2531]

She's back 😊

[@nahidmahmud2603]

Hi, I like your videos so much, I have a few requests. 1) Could you please create a roadmap video on 'FullStack Web Development'? 2) Could you create a video on 'Frontend & Backend Roadmap' and what technologies do I need to learn to become a Frontend or a Backend developer in 2023-24? 3) Could you please create tutorials on PHP? 4) Could you create tutorials on 'React JS'? Thanks for reading.

[@allsunday1485]

KZbin doesn't need more videos on those topics. There are plenty already, just use one of them and do your work if you're learning

[@allahlesboslu2_9]

​@@allsunday1485i guess he's comfortable with her teaching style , so he's asking ...

[@nahidmahmud2603]

​@@allahlesboslu2_9Yes, her teaching style is so good.

[@ksivasuriyaprakash9976]

The most underrated feature is `edit and send`

[@allahlesboslu2_9]

Finally she's back 🎉

[@chai112mno]

finally ... welcome back

[@chawaphiri1196]

I really like your videos. I am not finishing this video today but I am going to add it to my watch later and liked videos so I can watch it nicely. Thank you so much for this video

[@chawaphiri1196]

I came to reply to myself. I have watched the video

[@krishcshah]

Here we gooo

[@lezarus217]

You are alive?, Thank god

[@jesselardo393]

You're finally backkkk

[@thewlabs]

Finallyyy !

[@DesignMitho]

Where have you been? Good to see again

[@hasin9669]

Make a video about your studio tour/ desk tour.

[@TheCoderCoder]

I actually have an office tour video on my channel!

[@kensleylewis]

Nice job. Just my 2 cents on two things - (1), it would be nice if Firefox would allow us to tweak SCSS from Dev tools and see the results instantly, this way we can copy that SCSS update and paste it back into VSCode. (2) - It would be very helpful if Firefox allowed the content in the Change tab to say put, even if you refresh the browser. Clearing cache or offline data would then delete it.

[@TheCoderCoder]

Those would be super helpful!!

[@user-vatican]

how to set up the Gulp collector in the VS Code editor?, if you can make a detailed video, since you set up the sass processor, it was a very cool video with all the details, you have a huge respect!

[@renedperez]

CODER CODER!!!

[@makergeorge5806]

Im a big fan of urs and made the first comment I'm from India 🇮🇳 Im a beginner

[@bulletsingh]

❤❤❤

[@devthiagogo]

Quem gostou deixa o like!🚀

[@mrlectus]

please make a video about the debugger

[@benjaminschultz6501]

CC! Where did you get that fox hoodie in your thumbnail? I must acquire one.

[@TheCoderCoder]

It's AI generated 😅

[@yorubaigbo629]

She's Baaaaaaaaackkkkkkkkkkk!!!!!!!

[@avithedev]

Funniest thumbnail ever 😂

[@stillpointx2623]

How can I prevent websites from seeing that firefox is using web developer tools?

[@everbliss7955]

Where have you been?

[@_Sanji13]

Hi coder.

[@justraining1037]

Oh Thanks God

[@dxdanimeofficial]

I'm using brave browser.

[@notuzzi]

Where were you

[@pitascorner8355]

Your DP looks like trouble but you look quiet in your video😂

[@TheCoderCoder]

DP?

[@pitascorner8355]

@@TheCoderCoder your KZbin profile picture looks like one who's ready for Problems but in your videoa you look cool, calm and mess dramatic

[@TheCoderCoder]

@@pitascorner8355 Ohh haha

[@geekworthy7938]

She's alive?

[@VolodymyrInTech]

💛💛💙💙😘😍😀❤❤❤ Nice video

[@Bilio-lu1fk]

😢😮😢❤❤❤❤❤

[@werner4081]

🌷 Promo*SM

[@Adrian__d-.-b]

hi coder coder greetings from Colombia

[@muhammadbinsaleem8565]

Developers use dev tools but me always use console.log... trust me it gives you idea

[@icoderdev]

❤❤❤