► tweet

Firefox has been constantly gaining ground as the go to web browser for many web designers and developers. Firefox’s most popular feature is the use of extensions to enhance the browsers capability beyond simple website viewing. For developers and designers this means being able to add tools to the browser to speed up their workflow by completing tasks while viewing work in the browser. Currently Mozilla has nearly 1000 plug-ins listed in the web development category for Firefox. Here we will focus on the most popular and useful Firefox extensions for web development and design.

1.Firebug and Web Developer

I grouped these two extensions together because they provide similar functionality by allowing you to edit, debug, and watch CSS, HTML, and JavaScript live on any web page. The main difference in the two is how they operate. Where as Web Developer is a toolbar add-on and uses a bare bones approach to displaying markup, Firebug is an overlay/side bar implementation and uses visual cues to highlight markup similar to web development applications like Dreamweaver. Firebug also has its own extensions to increase its functionality for work with other web development languages such as PHP, jQuery, and Python.

2.Pixel Perfect

As the Photoshop to HTML market grows larger tools like Pixel Perfect are a great way to tie web development and design closer together. This extension allows for a composition of a web design to be placed over developed code in the browser with a transparency. This will allow the developers to tweak the code until it resembles the design.

3.Coral IE Tab

Not every person is using Firefox yet. In fact Firefox has only about 25% of the total browser market.  A respectable amount compared to other browsers, but is dwarfed by Internet Explorer’s 63% market share. This statistic means it is important for developers to check that their code is still valid between both Firefox and Internet Explorer. IE Tab allows users to quickly switch between using the FF engine, and the IE engine within Firefox to make sure their code holds up in both, or degrades gracefully.

4.Fireshot

Fireshot allows screen shots to be taken of an entire continuous web page through the browser. Alone that is not truly a noteworthy feature, but the ability to add annotations to screen shots make Fireshot a must have for development teams. The annotations can allow a dialog to open up between clients, developers, and designers pointing out issues with out using another application to mark notes on a web page.

5.Palette Grabber

Simply put Palette Grabber reads through the code of web pages to create a color palette based on the hex values. This color palette can be exported to Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET, or OS X.  Palette Grabber is a great tool for jumping from the inspiration phase to the creation phase without the dirty work of reading through lines of code.

These are just a few examples of Firefox extensions that I have used successfully.  These may not be the best for everyone but there are plenty more out there for you to try.

Written by Lawrence

Lawrence Hall is Communications Manager at Go-gulf, which provides web designing services in Bahrain, Sharjah, and other areas of Middle-East.