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.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
TecCrowd
TecCrowd
6 years ago

Firfox Dev tool is awesome. every web developer love this one. I use it.

htmgarcia
6 years ago
Reply to  TecCrowd

Hi @teccrowd
yeah! Is a great tool for developers and designers.
Regards

Vashishtha Kapoor
Vashishtha Kapoor
6 years ago

yes. Not even debugging but also editing, customization and code.

I learned how to change colors of my website font using code through Mozilla firebox dev tools. And that moment I did not know what is CSS and how does it work. But still I used to do it through mozilla.
Great Help

3
0
Would love your thoughts, please comment.x
()
x