Firefox Developer Tools for Beginners

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.

- 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