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”.

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

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”

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.

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.

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.