Free courses from frontend to fullstack and AI
AI Engineer - Learn how to integrate AI into software applications
Overview
Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Learn how to use Firefox Developer Tools to debug and troubleshoot HTML and CSS in this comprehensive tutorial. Explore the main UI of the developer tools panel, including the Markup View for searching and editing HTML. Discover useful features like the color picker, breadcrumbs bar, and Rules tab for CSS manipulation. Dive into the Layout tab to inspect grid and flexbox layouts, and utilize the Computed and Changes tabs for in-depth style analysis. Explore typography options in the Fonts tab and master navigation through tabs and the 3-panel view. Get hands-on experience with Responsive Design Mode, Network monitoring, Accessibility testing, and Storage management. By the end of this 42-minute video, gain practical skills to enhance your web development workflow using Firefox's powerful debugging tools.
Syllabus
- Intro
- Turn on developer tools, main UI in the dev tools panel
- Markup View, search, and edit HTML
- Color picker
- Breadcrumbs bar
- Rules tab
- Layout tab, grid and flexbox inspector
- Computed tab
- Changes tab
- Fonts tab
- Navigating tabs and 3-panel view
- Responsive Design Mode
- Network tab
- Accessibility tab
- Storage tab
Taught by
Coder Coder