A while ago I wrote about some of the extensions I use with Firefox which make the job of web development easier. I've since added some new ones to Firefox that I use on a fairly regular basis, so thought I should update the list.
Colour Contrast Analyser
Produced by accessibility expert, Gez Lemon, of Juicy Studio, this extension examines the foreground and background colours of elements on your page and provides a report to see if they are correct according to AERT and WCAG's luminosity colour contrast algorithms. To use, just right-click on a page, choose Colour Contrast Analyser (CCA), and then choose which tests you want it to run. The results then open in a new tab and colour highlighting of table rows quickly highlights the problem areas.
Gez says one of the extensions limitations is:
"The colour contrast analyser only examines the difference between foreground and background colours for text elements, so won't detect scenarios where text is written over the top of a background image"
but I actually find that useful because it helps in tracking down those instances in which a background-image has been used but a background-color hasn't been specified. Sometimes, if you forget to specify it, the background-color, which would be shown if images were turned off, is too light to read the text, and running a test with the CCA quickly identifies those areas.FireForm
Automatically fills in form fields with a single click of the button. Obviously this is very handy when testing forms, but FireForm also allows you to set up multiple profiles and I have found it useful too for when sumbitting clients' sites to directories for SEO purposes. The extension also has the ability to 'learn' which fields fields to associate certain pieces of information with, for example, for email, input names might be email or e-mail, but you might come across a form which has a name different from those and you can easily add that value to FireForm in case it encounters another form with the same name again.
FireShot
Enables you to easily take screenshots of your browser window and then perform a variety of editing functions on them like cropping, conveting to grayscale, blurring, annotating, adding text, other images or shapes, and then saving, sending to email or uploading. You can also take screenshots of just the visible area, or the entire page.
GridFox
Overlays a semitransparent grid on any website. It's easy to customise things like number of columns and their width, rows and their height, whether there are columns of varied width and the opacity of the grid. I haven't actually used this one too much yet as you can only use it on pixel-width based layouts and a lot of mine have been fluid-elastic lately, but no doubt it will come in useful at some point.
Mouse Gestures Redox
Not so much a web development tool, but still very useful. Opera's had them for a while but now you can have the same functionality with Firefox. What are mouse gestures?
Mouse Gestures are a fast way to execute commands without using the keyboard, menus or toolbars. Instead, the user holds down a mouse button (usually the right one), moves the mouse in a certain way to form a gesture, then releases the mouse button.
There's a huge array of gestures you can use but I only really use the basic ones listed on mousegestures.org's home page. I've always been a big keyboard shortcut user for all my applications so still find it quicker to use the keyboard for a lot of things, but for basic navigating through pages and opening and closing tabs, this extension is a definite saver on effort.