5 Firefox Firefox Web Developer Add-ons For Average Users

You won’t find any super-advanced add-ons in this list, these Firefox Web Developer add-ons are intended for “the rest of us” – people who grudgingly have to edit our own web sites.

  1. Measure-it
  2. Measure-it allows you to quickly bring up an on-screen “ruler” to measure sections of your site. Quickly determine the space between certain sections, indents etc.

      Quick Usage Instructions

    1. Click the MeasureIt button in the top right corner of Firefox
    2. Measure-It Button in the Firefox menu bar

    3. Click and drag the area you want to measure.
    4. measure-it being used in Firefox

  3. ColorZilla
  4. ColorZilla lets you get the color codes from any color (from an image, CSS element etc) in your browser and paste it into another app.

      Quick Usage Instructions

    1. Click the ColorZilla icon in your Firefox Toolbar
    2. ColorZilla in the Firefox menu bar

    3. Hover your cursor over the element (color) you’d like to determine and it’ll be displayed in a ‘bar’ at the top of the web page. Click on the rgb or Hex color code and it’ll be copied to your clipboard so you can paste it into another app.
    4. ColorZilla being used in Firefox

  5. Site Compatibility Tools
  6. Site Compatibility Tools is an add-on that allows you to check site compatibility issues right from within Firefox Developer Tools.

    Site Compatibility Tools add-on for Firefox
    click to enlarge

  7. User-Agent Switcher and Manager
  8. User-Agent Switcher and Manager gives you the ability to switch your browser User-Agent so that you can ‘trick’ a web site into thinking you’re using a browser that you’re not. Very helpful for seeing what a site looks like on a mobile device without having to use a mobile device. We have a more detailed guide on using the User-Agent Switcher and Manager which can be found here.

    User-Agent Switcher and Manager Firefox add-on

  9. Firebug (RIP) – now Web Developer Tools
  10. Firebug has been replaced by Firefox Developer Tools, which is built into Firefox itself. You can find these tools by selecting Tools from the main menu and then Web Developer from the drop-down list.

    Firefox Web Developer Add-ons menu list


If this article helped you, I'd be grateful if you could share it on your preferred social network - it helps me a lot. If you're feeling particularly generous, you could buy me a coffee and I'd be super grateful :)

buy a coffee for simplehelp.net


Home » Web Design & Dev » 5 Firefox Firefox Web Developer Add-ons For Average Users

Leave a Comment

Your email address will not be published. Required fields are marked *