7 Must Have Firefox Extensions for Web Developers

February 4th, 2011 Leave a comment
Like the article?
Firefox Extensions

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

https://addons.mozilla.org/en-US/firefox/addon/aardvark/
http://karmatics.com/aardvark/

Aardvark Firefox Extension

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.

Colorzilla

https://addons.mozilla.org/en-US/firefox/addon/colorzilla/
http://www.colorzilla.com/firefox/

Colorzilla Firefox Extension

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

Firebug

https://addons.mozilla.org/en-us/firefox/addon/firebug/
http://getfirebug.com/

FirePHP

https://addons.mozilla.org/en-us/firefox/addon/firephp/
http://www.firephp.org/

Firebug and FirePHP Firefox Extensions

These are really two extensions but FirePHP relies on Firebug to work and is in many ways an extension to an extension. Firebug is the most popular debugging console available for Firefox. It allows developers to open a debugging console and view the DOM, CSS and Javascript elements. With FirePHP, PHP developers can use a PHP statement to write debugging messages to the Firebug console as well. Firebug has in many ways become an industry standard and it is not unusual to see it listed in job requirements for web developers.

IE View

https://addons.mozilla.org/en-US/firefox/addon/ie-view/
http://ieview.mozdev.org/

IE View Firefox Extension

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.


MeasureIt

https://addons.mozilla.org/en-US/firefox/addon/measureit/
http://www.kevinfreitas.net/extensions/measureit/

Measureit Firefox Extension

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.




Screen Grab

https://addons.mozilla.org/en-us/firefox/addon/screengrab/
http://www.screengrab.org/

Screen Grab Firefox Extension

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.


Web Developer

https://addons.mozilla.org/en-US/firefox/addon/web-developer/
http://chrispederick.com/work/web-developer/

Web Developer Firefox Extension

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?
Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment