How to debug CSS with Firefox Developer Tools
Вставка
- Опубліковано 4 лип 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. 👍
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!
Finally 🎉🎉🎉🎉🎉
omg, finally we can see u again, pls upload more, especially about responsive design
finally after a long time !!! happy to see the notification from your channel !
This is super-useful: thank you so much! I'll be revisiting this video often...
Eagerly waiting for your course
Welcome back have been missing your teachings. It is time I learn more staff.
Hey! It is nice to see your videos again!
Yes!! You are back! I was a little bit worried 😅
Finally coder coder is back 🎉
Glad to see you again !!!!
Welcome back! Was hoping there would be a return for the GOAT!
Welcome back! Hope you're doing well!
Welcom back, thanks for making this awsome tutorial video
This is a very useful video. Many people avoid this topic. Thank you!
Welcome back, I was worried 😢 happy you're ok 🎉
Welcome back our best teacher🎉
You're finally backkkk
Please bring a chrome dev tools course for debugging JavaScript, ReactJS
Thank you. I am using Firefox for now on.
You are alive?, Thank god
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
Yay, you are back!
hi!! i missed u and ur content, thank u sm!
You're back 👍
Good to see you!
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.
UA-cam 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.
She's back 😊
finally ... welcome back
Awesome video! What do you use to record with?
Welcome back 🎉🎉
Finally she's back 🎉
you are best. Keep going
Finallyyy !
Here we gooo
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!!
Guess who's back???!!!!! Back again!!!!!
The most underrated feature is `edit and send`
Where have you been? Good to see again
Im a big fan of urs and made the first comment I'm from India 🇮🇳 Im a beginner
CODER CODER!!!
please make a video about the debugger
She's Baaaaaaaaackkkkkkkkkkk!!!!!!!
CC! Where did you get that fox hoodie in your thumbnail? I must acquire one.
It's AI generated 😅
❤❤❤
Quem gostou deixa o like!🚀
Make a video about your studio tour/ desk tour.
I actually have an office tour video on my channel!
How can I prevent websites from seeing that firefox is using web developer tools?
Hi coder.
Oh Thanks God
Where have you been?
I'm using brave browser.
Funniest thumbnail ever 😂
Where were you
😢😮😢❤❤❤❤❤
💛💛💙💙😘😍😀❤❤❤ Nice video
She's alive?
Your DP looks like trouble but you look quiet in your video😂
DP?
@@TheCoderCoder your UA-cam profile picture looks like one who's ready for Problems but in your videoa you look cool, calm and mess dramatic
@@pitascorner8355 Ohh haha
🌷 Promo*SM
hi coder coder greetings from Colombia
Developers use dev tools but me always use console.log... trust me it gives you idea
❤❤❤