5 Essential Firefox Plugins for Designers

Firefox is most of us designer types browser of choice these days. Its standards compliant & offers an array of brilliant add-on’s in the form of plugins. There’s 5 I can’t live without, so I thought I’d share them.

Firebug

Pretty similar to the web developer toolbar above, but the thing I love most about this plugin is the ability to edit live websites. Lets say a client comes to you and notices their site not displaying correctly – no problemo! Fire up Firebug, click the ‘Inspect’ button on the top left of the window and you can inspect every element on that webpage. Its so awesome that even the CSS associated with the element you’re inspecting will be brought up in the right hand Firebug window too. You can make changes to it and see them represented on your website right before your eyes! This tool is a great timesaver for me simply due to this one feature, and to be brutally honest, thats all I really use it for. However there is much much more that Firebug has to offer. You just have to spend time playing around with it. What are you waiting for? Go ahead and Download Firebug Plugin.

Web Developer Toolbar

This is essential for any web designer / developer! I bet thats millions of us that rely on this tool daily, so If you’re one of the few that doesn’t have it yet, grab it now. Just listen to what this guy below has to say about it!

The Web Developer Toolbar is great for working on your own pages (but also good for figuring out how others work) – by Hartz on November 17, 2008

My sentiments exactly! It has so many features, and is the perfect tool for someone new to CSS and to the experienced developer. Here are some of its most handy features;

  • on-the-fly validation of web pages
  • viewing the CSS and HTML of web pages
  • editing CSS of websites on-the-fly
  • disable/enable JavaScript, Cookies, CSS, Images
  • re size the browser window for common resolutions – 800 x 600 etc
  • outline CSS elements (my favourite feature Shift + Cmd (Ctrl) + F)
  • …and much much more!

This plugin offers so much that you won’t know how you lived without it once you’ve used it. It makes editing websites and building them so much quicker. Download Web Developer Toolbar Plugin.

ColorZilla

Being a designer you’re bound to notice an interesting colour, or colour combination on your travels. With ColorZilla you can find out the exact hexidecimal code value for it from within the browser. No longer do you need to take a screenshot and paste it into Photoshop. Download ColorZilla Plugin.

ScreenGrab

Taking screenshots can be a right pain. I know that from my Windows machine at work. I use a mac keyboard, so for some reason the Print Screen button doesn’t work. Before I discovered ScreenGrab I was searching around for a decent bit of software that allowed you to take screenshots. More often that not they aren’t free, or they don’t let you take screenshots of full web page (the areas below the fold etc). You’ll be glad to know that ScreenGrab lets you copy or save, a selection of a webpage, the full window, or the whole page. Result! Download Screengrab Plugin

Cooliris (formerly PicLens)

Searching for images can take up a lot of valuable time. Cooliris will save you loads though as you’re able to browse for photos from Google, Flickr, Photobucket, Yahoo, DeviantArt and a few more sites. I think you can even browse YouTube videos to waste even more of your time! This is obviously no substitute for scouring the usual image sites such as iStockPhoto, but if you’re looking for something quick, maybe for a blog post (be sure to add credits) then this is for you. Download Cooliris Plugin

Would you like to be notified each time we post new digital media?

Subscribe to our newsletter

Get access to all our guides and resources