Note details

How to debug CSS with Firefox Developer Tools

BY d1wpf
August 25, 2025
Public
Private
8288 views

How to Use Firefox Developer Tools for Inspecting HTML and CSS

In this video, I discuss how I utilize Firefox Developer Tools to inspect HTML and CSS while building websites.

Benefits of Developer Tools

  • Simplifies and accelerates troubleshooting and debugging of CSS.
  • Firefox Developer Tools offer great grid and flexbox inspection features not commonly found in other browsers.

Accessing Developer Tools in Firefox

To access Firefox Developer Tools:

  • Right-click Method: Right-click anywhere on the webpage and select the "Inspect" option. This will open the Developer Tools panel next to the website.
  • Hotkeys:
    • Ctrl+Shift+I
    • Pressing F12 key

Overview of Developer Tools Panel

  • Tabs: Located at the top of the panel.

    • First tab: Inspector
    • Little icon: toggles Responsive Design Mode
    • Three dots icon: Opens settings where you can control the layout of the dev tools window.
  • Inspector Tab:

    • HTML Code Area: Displays HTML/Markup View with colors coding various tags. You can click arrows to expand child elements.
    • Highlight Elements: Hover over an element to see its position on the web page.
  • Customization:

    • Add New Node: Click on the plus icon to add a blank div.
    • Edit as HTML: Right-click any element to modify its HTML markup directly.
    • Delete Node: Use the delete key to remove selected elements or classes.

Working with CSS Styles

  • Rules are listed from the most to least specific.
  • Shows where each style rule came from (CSS file and line number)

CSS Styles Panel

  • Rules Tab: Displays style rules applied to the selected element.

    • Inline Styles: Appear at the top as they are the most specific.
    • Invalid Declarations: Automatically crossed out with a warning icon.
    • Check Boxes: Disable style rules easily for testing the website’s appearance without the rule.
  • Styling Tips:

    • Use the plus icon to add a new node as a child to the selected element.
    • Right-click and choose Edit As HTML to quickly modify the element's HTML.
    • Use the duplicate node option for quick layout testing.
    • The eyedropper icon is a color picker that copies the HEX color code to the clipboard.

Layout Tab

  • Box Model Panel:

    • Displays the Box Model, including content size, border, margin, and padding.
    • Allows editing of these values directly in the panel for testing layout changes.
  • Grid and Flexbox Inspection:

    • Highlights grid and flexbox layouts on the webpage for easy identification.
    • Navigate quickly to grid containers in the markup view by clicking the grid badge.
    • Customize the color for grid lines in the settings.

Computed Tab

  • Computed Styles: Displays calculated styles applied to an element, useful for troubleshooting.

    • Font Size: Displays actual computed size with expanded view for original values.
    • Filter Text Box: Allows filtering of styles to show only those matching specific properties.
  • Browser Styles: Displays all styles applied to the element, including default browser styles.

Conclusion

The Firefox Developer Tools provide versatile features for inspecting, editing, and troubleshooting HTML/CSS, especially for grid and flexbox structures. These tools are indispensable for web development as they greatly enhance efficiency and accuracy in designing responsive websites. If you want more information on how to build websites, check out the course linked in the video description.

    How to debug CSS with Firefox Developer Tools