Over the past few years the Firefox community has growth fast and fierce.  For web developers there have been countless add-on’s and plugins published that making building websites (i) more efficient (ii) more browser-compatible, and (iii) easier to debug.  Below are my top five:

Top 5 Web Developer Firefox Add-on’s

• Web Developer – Integrates with Firefox to create a menu and a toolbar with various web developer tools (e.g. outlining page elements, re-sizing browser window size, site-specific cookie management, and validation tools )
• Firebug – Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
• YSlow – YSlow brings additional functionality to Firebug regarding site performance. YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages which coincides with the YSlow team as well as metrics defined in the book High Performance Web Sites: Essential Knowledge for Front-End Engineers
• Server Spy – Indicates the web server type for the sites you visit (e.g. Apache, IIS, Tomcat, nginx, and so forth) this data is invaluable during debugging complex server-side issues.
• Live HTTP Headers – Similar to Server Spy which just pulls the ‘Server’ element from the HTTP response header, this add-on makes additional elements available for debugging. See ‘List of HTTP headers‘ on the Wikipedia for a full listing of request/response definitions.

If you don’t frequent browsershots.org you should be aware that they have released two new and very useful features. First, you can purchase priority processing so that your screenshots are processed much faster. In addition, the source code is now available for download. If you are interested in configuring your own Browsershots environment locally, I’d highly suggest it if you are in the field of QA or HTML development.

For those of you who aren’t familiar with browsershots.org, it generates screenshots of web pages in a variety of different browsers on multiple platforms so you can ensure you visitors are seeing page designs as they are intended to be viewed.

If you have upgraded from the Apple Safari version 2.0 web browser to 3.0 here are two quick tips that developers and Q&A folks might find useful. The first tip is to turn on the built-in Web Developers Kit which is similar to the Firefox Firebug plug-in. Once you activate it (instructions are below) you can launch it by right clicking the browser window and selecting “Inspect Element.” The other tip changes the page loading progress bar (the standard filling of the address bar from left to write in blue) to a simple pie chart that fills clockwise indicating page load completion. If you wish to deactivate either of these features you can use the same instructions replacing the “-bool true” with “-bool false”

Finder->Applications->Utilities->Terminal
 
defaults write com.apple.Safari DebugUsePieProgressIndicator -bool true
defaults write com.apple.Safari WebKitDeveloperExtras -bool true