How to debug CSS with Firefox Developer Tools
Vložit
- čas přidán 5. 08. 2024
- 🔥 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
Great video fr fr no cap ong type shiii
Welcome back! Don't see many deep dives on this topic, look forward to it :)
THIS was the video I was looking for. I handn't been able to find a video that fully explained dev tools til now. 👍
Finally 🎉🎉🎉🎉🎉
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!
omg, finally we can see u again, pls upload more, especially about responsive design
This is super-useful: thank you so much! I'll be revisiting this video often...
finally after a long time !!! happy to see the notification from your channel !
Eagerly waiting for your course
Welcome back have been missing your teachings. It is time I learn more staff.
Great Job on this video. Very Helpful.
This is a very useful video. Many people avoid this topic. Thank you!
Hey! It is nice to see your videos again!
Yes!! You are back! I was a little bit worried 😅
Glad to see you again !!!!
Finally coder coder is back 🎉
Welcome back! Was hoping there would be a return for the GOAT!
Welcom back, thanks for making this awsome tutorial video
Welcome back our best teacher🎉
Welcome back! Hope you're doing well!
Welcome back, I was worried 😢 happy you're ok 🎉
Thank you. I am using Firefox for now on.
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
I came to reply to myself. I have watched the video
hi!! i missed u and ur content, thank u sm!
You are alive?, Thank god
You're finally backkkk
Good to see you!
Yay, you are back!
You're back 👍
Finally she's back 🎉
She's back 😊
you are best. Keep going
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.
CZcams 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
@@allsunday1485i guess he's comfortable with her teaching style , so he's asking ...
@@allahlesboslu2_9Yes, her teaching style is so good.
finally ... welcome back
Welcome back 🎉🎉
Please bring a chrome dev tools course for debugging JavaScript, ReactJS
Awesome video! What do you use to record with?
Here we gooo
Finallyyy !
Guess who's back???!!!!! Back again!!!!!
Im a big fan of urs and made the first comment I'm from India 🇮🇳 Im a beginner
Where have you been? Good to see again
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!
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.
Those would be super helpful!!
CODER CODER!!!
The most underrated feature is `edit and send`
She's Baaaaaaaaackkkkkkkkkkk!!!!!!!
❤❤❤
Hi coder.
please make a video about the debugger
CC! Where did you get that fox hoodie in your thumbnail? I must acquire one.
It's AI generated 😅
How can I prevent websites from seeing that firefox is using web developer tools?
Make a video about your studio tour/ desk tour.
I actually have an office tour video on my channel!
Quem gostou deixa o like!🚀
Oh Thanks God
Where have you been?
I'm using brave browser.
Funniest thumbnail ever 😂
Where were you
She's alive?
😢😮😢❤❤❤❤❤
💛💛💙💙😘😍😀❤❤❤ Nice video
🌷 Promo*SM
Your DP looks like trouble but you look quiet in your video😂
DP?
@@TheCoderCoder your CZcams profile picture looks like one who's ready for Problems but in your videoa you look cool, calm and mess dramatic
@@pitascorner8355 Ohh haha
hi coder coder greetings from Colombia
❤❤❤