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.
- Measure-it
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.
- Click the MeasureIt button in the top right corner of Firefox
- Click and drag the area you want to measure.
- ColorZilla
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.
- Click the ColorZilla icon in your Firefox Toolbar
- 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.
Quick Usage Instructions
- Web Developer
Web Developer is an add-on that adds some very helpful developer features to Firefox. You can find more info on those features, how to use the addon etc. here.
- User-Agent Switcher and Manager
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.
- Firebug (RIP) – now Web Developer Tools
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.
Quick Usage Instructions
