Debugging Your Website with Firefox Dev Tools

| Web Design
Debugging Your Website with Firefox Dev Tools

In previous years, we often talked about using browser add-ons like Firebug to help bugshoot your websites.

However, the major browsers now all include their own built-in inspect tools to debug websites. Firebug was retired at the end of 2016. If you’re using Firefox, Dev Tools is the tool that will help you to debug your site’s design.

In this tutorial we will show you how to start using Firefox Dev Tools.

Enable Inspect tools

  • In your Firefox browser, open the site you want to debug.
  • Right click over an element you want to debug. In this example, we're analyzing a yellow button.
  • Click "Inspect element".

Firefox Dev Tools in action

A new area will come up from the bottom of the browser. There you can see the HTML code in the "Inspector" tab. I've labelled the image below you can see the layout clearly:

a) The element you’re debugging
b) The element’s HTML
c) The element’s CSS

The layout of Firefox Dev Tools

How to debug your site's HTML

  • In the "Inspector" area, right click on the HTML you want to work with.
  • Click "Edit as HTML"

Debugging Your HTML with Firefox Dev Tools

Change the HTML depending to your needs. Then click above or below the edit field to see your changes reflected on the browser. Please note that changing the HTML doesn’t actually update your live site. Firefox Dev Tools only helps to test and preview your changes.

Debugging Your Website with Firefox Dev Tools

How to debug your site's CSS

  • Under the "Rules" tab in the CSS area, tweak the CSS properties for the current element. In this example, we're using a button again.
  • As you’re changing the CSS, note that the new properties are being reflected immediately. In this example, I changed the button colors.

Debugging Your CSS with Firefox Dev Tools

Note, changing the CSS doesn’t actually update your live site. Firefox Dev Tools only helps to test and preview your changes. In order to apply the custom CSS you tested through Dev Tools, add the specific CSS you tried into your site’s server.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.