Add to 
I have started to use Firefox ever since i jumped in the business of blogging and web design. Apart from being a great browser, it does lots of things. I have practically turn Firefox in the ultimate web development tool, letting me realtime editing capability over the stylesheets, html etc. In this article I’ll show you a collection of useful Add-ons and how to configure them to turn Firefox into the ultimate test environment for creating Web Pages.
Create Separate Profile for Web Development
Before you proceed I recommend you creating a separate profile as installing all these development tools will make Firefox into a RAM sucker, so we should first create a new profile for Firefox. You can see the documentation at Mozilla.com for a more detailed explanation on how to create a profile.
Now that you’ve got Firefox configured with a separate profile just for web development, let’s take a look at the extensions we can use to make Firefox into the ultimate web development tool.
Tools that I use
Firebug is easily the most sought after extension for debugging javascript, viewing CSS and html. You can make realtime changes to the code and CSS, and use it to debug your Ajax code. Check the snap below… I guess it will clear your doubts.
Another awesome plugin thats does exactly like Firebug. This is a must-have for any developer worth his salt, but I’m sure you’ve already heard of it.
Very handy tool which features a color picker and an eyedropper feature, allowing you to quickly grab any color from any pixel inside the browsers content area.
Another useful debug tool, much like firebug or webdeveloper… just hover of an element to get the properties.
An innovative Firefox extension which lets you modify a Web page from your browser in WYSIWYG mode and then save those changes as a Greasemonkey script so that they’ll be repeated the next time you visit the page.
Measure ItIt easily lets you measure the width, height, or alignment of page elements in pixels.
IE View / IE Tab / OperaView / FirefoxView / Safari View / IE View Lite
These extensions let you easily view the current page in different browsers. Actually ‘m getting annoyed each day having to code differently for each browser even small tweaks, that sometimes takes hours to get fixed.
The Restart Firefox extension is very useful extensions as it closes and restarts Firefox without closing the tabs you where watching previously.
The YSlow extension is a new extension from Yahoo that will analyze your page and tell you where you are making mistakes. Very useful extension, but it does require the Firebug extension. It lets you gauge your site’s performance… while giving you grades on each of the parameters.
The Dummy Lipsum generator extension will generate dummy content for you based on the famous Lorem Ipsum text that is very useful for laying out fake content in your site.
The Screengrab extension will let you take screenshots of pages. You can take even shots of the entire screen.
This is just a drop of the ocean, Firefox has tons of others extensions that makes web development a tad easy work. These are just few of my favorite Firefox Web Dev extensions. You can head over to Mozilla addons page and find other interesting extensions. Happy hunting.
February 11th, 2008 at 6:28 pm
Screengrab has attacted my attention more than any other extension. I will try it as soon as possible (may be tonight)
February 11th, 2008 at 7:34 pm
Excellent compilation! My web development profile closely mimics yours. Although, I haven’t used Platypus and installing it right now to see how I can use it, being a big time Greasemonkey user.
I do use JSview & View Source Chart in addition to the above . Stumbled! :razz:
February 11th, 2008 at 11:37 pm
Wow thanks guys… if you really loved it. Thanks K for the stumble. There are still lots of great extensions that i haven’t cover it. I hope in the next installment I’ll compile a better list.
February 15th, 2008 at 9:45 am
The Web Developer Extension already as has a ruler and html validation, no need for extra add-ons.