Three Firefox Plugins to Greatly Help Web Developers

Oh no, not another Firefox plug in list! Well keep your pants on! This isn’t another top 10 list, more three plug ins that I use and take for granted on a daily basis, and a break down of what they have to offer.

ColorZilla:

It has to be one of the simplest plug ins, but worlds of useful when doing design work online. ColorZilla will retrieve the colors of any pixel within Firefox. ColorZilla sits in your status bar, and when you click on it you will get a little “eye dropper”, similar to graphic applications like Photoshop, you can then drag the eye dropper around the screen to retrieve your color. Once selecting a color you can copy the value in many formats including: Hexadecimal, RGB, and other variations.

colorzilla.gif

Web Developer:

The Web Developer plug in gives you a tool bar in Firefox, but this is no normal tool bar… this is the answer to your dreams. With this tool bar you can accomplish many tasks that will greatly help out when developing web software. There are way too many features to list here, but some of my favorites are: resizing the browser window to reflect different screen resolutions, outlining HTML tags, display form fields, view CSS, disable certain CSS styles, modify cookies, view cookie information, and others. There are so many great features of this tool bar, and it can drastically reduce your development time, and hunting down problems in your code.

webdev.png

Firebug:

Debugging Javascript can suck, especially in Internet Explorer. Fortunately for us we are not using Internet Explorer, and with Firebug its almost like cheating. Firebug gives you loads of great features when going through Javascript during the development process. A must have!

firebug.gif



If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

Excellent, I already have all three installed :-D

I don’t remember what it was like before I started using these plugins. It started with web dev plugin, which nothing short of amazing. And then I found colorzilla, so useful when color matching. When I started doing more javascript… well, firebug is not only essentia,l it is required. The other plugin I use very frequently is MeasureIt. Great for getting height/width of an piece of your website quickly.

All I can say is yes, yes and yes. These 3 plugins are an essential part of my dev team’s toolbox

@Joshua: the Web Developer plugin has a measuring device built-in. Just go to Misc -> Show Ruler I use it all the time. Unless you’re talking abot something else.

@egon: thanks, yes, I know about the built-in and use it in some cases. However, I find myself using measureIt more because it is quicker to access/disable(single click) and provides a bit cleaner and simpler interface for measuring. You should try it, it resides in the bottom left next to colorZilla once installed.

Thanks, Joshua, I’ll check it out. Accessing the ruler in WDE has always bothered me a little bit…right-click, then go through the menus, then do it again to turn it off.

Sorry, the comment form is closed at this time.