Web development has become increasingly more complicated as web sites utilize more technology to do more. Debugging has become more involved and figuring out how other sites work in order to learn new techniques has become far more difficult. One of the greatest features of Firefox browser is its robust support of extensions. The scores of plugins now available for Firefox are a prominent factor in making it the most popular browser on the net. In this post, I am going to present 7 Firefox extensions aimed at simplifying web development. These are must-have for both beginner and seasoned web developers.
Aardvark is one of my all-time favorite Firefox extensions. When activated, aardvark will outline the various block elements of a web page. This makes it very useful for looking at the structure of a web page and how the various pieces fit together. Keyboard shortcuts allow you to widen or narrow the focus so you can see contained block and blocks that act as containers. I’ve often used aardvark as a visual debugging tool with my CSS.
This extension puts an eyedropper in the lower left corner of Firefox. You can use this eyedropper to identify the RGB code for colors on a web page. This extension is invaluable when building color schemes or analyzing the use of color on other web sites.
Firebug & FirePHP
IE View does just what the name implies. It allows you to view a web page in Internet Explorer with a single click. This is a useful tool for viewing a web page in Firefox and then looking at in Internet Explorer during testing.
This extension allows a user to work with a virtual ruler within Firefox to measure the distance and size of page elements in pixels. This is a very handy tool for looking at web sites that inspire you and analyzing their sense of balance and how the page elements relate to each other.
A common web development task is to take a screen capture of a work in progress to show clients or team mates. Screen Grab is an extension that makes taking a screen shot of a web site very easy. The best feature is that it is possible to take a screen shot of the entire web page, not just the part that is visible. This makes it very handy for taking screen shots of pages that would normally scroll.
The web developer extension combines a number of useful tools into one handy web development tool bar. It includes a number of features including the ability to clear session cookies, view image file sizes and simulate various screen sizes and resolutions.
We’ve discussed 7 must have Firefox extensions for web developers. Do you have other favorites that make your development tasks easier?