Firefox 3 add-ons to make you a better Web developer

Firefox might be a fast browser but it's extensions can transform it into a powerful development tool for Web developers and designers. Here are 10 of the best to get you started.

Firefox might be a fast browser (for speed, try out Opera or WebKir -- Ed.) but its extensions can transform it into a powerful development tool for Web developers and designers. Here are 10 of the best to get you started.

Firefox's open platform makes it ideal to extend and turn it into almost anything you want. Hundreds, if not thousands, of developers have contributed to the platform and pushed and pulled Firefox to do strange and wonderful things. With just a bit of XUL and JavaScript you too could make your very own Firefox add-on.

Amongst all these extensions are some truly useful gems you can use on a day-to-day basis to save time and become a better Web developer. Without further ado, here's my list of useful tools that work in Firefox 3:

1. Web Developer Toolbar
This toolbar has been around for a while but is a solid tool with a variety of features. It can view and manage cookies, view and edit CSS, examine code and image elements, measure elements on a Web page, view websites in different resolutions, inspect code validity, and view all sorts of information about websites you are viewing or developing yourself.

2. Firebug
Firebug is the essential tool to view and edit your HTML, JavaScript, and CSS on a website. The nifty part about this tool is that changes can automatically be seen in the browser. This is a great tool for prototyping and showing clients how website changes will look.

3. FireFTP
As the name suggests FireFTP is an FTP client for your browser. While not as powerful as some desktop FTP applications it is free, offers secure transfers, and works across Mac, Linux, and Windows. Did we mention free?

4. YSlow
YSlow is a Firefox add-on developed by the good people at Yahoo. This add-on will show you possible reasons why a website is slow. The tool will view your code and give you a report summary and possible reasons where improvements can be made. YSlow will even give your site a grade according to Yahoo's rules for high performance websites.

5. FireShot (Windows) and Screengrab (all)
These two plug-ins are grouped together because they are both good at taking screenshots. FireShot, which only works on Windows, creates screenshots of Web pages and allows users to add notes about a page. This is useful for developers and designers during the development and testing phase of a website.

Screengrab isn't as powerful as FireShot but is available for Mac, Linux, and Windows and easily saves an entire Web page as an image.

6. ColorZilla 2.0
ColorZilla is a functional tool to find a colour on a certain point in the browser. Once found you can copy and paste that colour for future reference or move it into your code editor or other application to change the website or image. While that is the main feature of this tool, it also allows you to spy on DOM elements to get various information, measuring distances on a Web page, and zoom in on specific areas of a page.

7. Extended Copy Menu
A simple but useful add-on that allows you to copy a section of a Web page as HTML. This is a useful application if you're just looking to copy the HTML and will save time not having to click "view source" and finding the code.

9. SeoQuake
Search engine optimisation is important, if not a dark art in some ways, for websites. SeoQuake takes much of the guess work out of SEO by investigating important SEO parameters of a website. It will determine what your Google PageRank score is, who your referrers are, your vote count, and much, much more. This is an essential tool for beginners to advanced Web developers who need to know about SEO.

10. Gspace
We're not going to say this is going to help you as a Web developer, but this Firefox add-on is a handy way to back-up data to your Gmail account. Acting as an online drive, the interface lets you simply drag and drop files into your Gmail account to pick up and retrieve at a later date.