Posted on May 27th, 2010Firefox is the world’s most popular open source web browser and the most beloved tool by web developers, programmers, designers and other folks whose main job includes code and color editing.
While it may not be the fastest browser around (Chrome and Opera are faster, but we should wait until Firefox 4 before deciding to switch), it is definitely the most stable and has a very large collection of various useful add-ons and themes. These add-ons are what make it so popular and the reason why it will continue to be so, because all of the other browsers combined can not offer the same amount of quality extensions.
Now that you know why the Firefox web browser is so popular and widely used, let us take a look at the best and most popular Firefox add-ons for web developers. If you are a web developer, you will most definitely find them useful, and if you are not, you will find it interesting to see just what can Firefox do besides browsing the Internet.
Firebug. Firebug is, along with the Web Developer toolbar, one of the most popular web developer tools collection that come as an add-on for Firefox. It allows you to see a lot of information about a web page, including the code and how it’s built, various tags, widgets and dependencies, CSS information and much more. You can also view, edit and debug HTML, Javascript and CSS code right in your browser.
Web Developer. As I said above, the Web Developer add-on (it was named Web Developer Toolbar before and a lot of people know it by that name) is one of the most popular Firefox add-ons for web developers with over 15 million downloads, right after Firebug, which has slightly over 24 million downloads. It offers the same features plus some unique ones like Password View (allows you to view passwords under hashes) and Detailed Page and Image Information. You really can’t choose between these two, and you don’t have to – they’re free, so just install both.
HTML Validator. As its name suggests, this is a simple HTML validator that will show you whether a page is HTML compliant or not and also inform you where the page fails to pass, so you can easily fix it.
HttpFox. This add-on is a great monitor of all incoming and outgoing HTTP traffic on your computer. As a developer, there are many uses for the information it provides, including being able to see what errors there are in your application or code and checking the server and client for any security breaches. HttpFox can show you all the headers and cookies sent and received, the query string and POST parameters, the response body and much more.
CodeBurner. This is a great companion extension meant to be used together with the Firebug add-on, and it provides you with more reference information on CSS and HTML, displayed in a separate “Reference” panel. You can see how it can be useful when you need to view any reference code.
FireFTP. As a web developer, you are most likely using an FTP client. But having to always switch to a third party application can be daunting sometimes, especially when you just need to quickly upload, download or edit a file. FireFTP is a full FTP client add-on for Firefox. You can have as many connections as you want in multiple tabs or windows, and it even supports SFTP if you install Putty (the most popular SSH client for Windows and Linux).
Tamper Data. You can use this add-on to modify any http and https headers and post parameters to see how it affects your pages, site and applications, test the strength of your security and trace and time all the requests and responses.
Console2. This add-on replaces the standard JavaScript console with a much better and advanced error console. You can filter errors by type, language and context, search for the errors that interest you, hide duplicates, get easy access to the console via a simple customizable toolbar and do a lot of other useful things.
View Dependencies. This excellent add-on lists all the files, code snippets and elements that were loaded and used to display the current page. Absolutely all of them. It’s very useful when you need to see what else is loading on a page or you want to increase the page load speed. There is a lot of detailed information displayed about every element and file that was loaded.
Pixel Perfect. Pixel Perfect is a great add-on that integrates and works together with Firebug (see the description above), providing the user with the ability to overlay any image over a current web page. This is extremely useful for developers and designers who are creating mock ups in Photoshop and want to see how the design will change, by how much are they off and what other things they can apply and use.
YSlow. This add-on analyzes a web page following Yahoo’s rules for high performance web sites (using Yahoo Smush.it) and tells you when your site and page load is slow, gives you reasons why and tips on how to improve the situation. It is a great tool for site and page performance analysis for any web developer.
There are definitely more great add-ons for Firefox that web developers will find useful, and the above are just the beginning. If you are interested in what other tools are available for Firefox, just go to Mozilla’s Add-ons Collection and start searching, browsing, installing and testing!