6 Firefox Extensions That Will Massively Improve Your Productivity

I love Google’s Chrome. My pages run multiple times faster. But, at least for the time being, you won’t see me jumping over the Firefox ship just yet. The massive number of Firefox extensions make developing your themes much, much easier. In this article, I’ll list six extensions that are crucial to developing your web applications quickly.


Screengrab

Screengrab

Ready to submit your template to ThemeForest? Screengrab is an easy to use extension that allows you to instantly save a png of your entire webpage to your desktop. While you might currently be prepping your snapshots in Photoshop, Screengrab will reduce your prep time dramatically.

Install




Web Developer Toolbar

Web Developer Toolbar

Are there any web developers who don’t have this extension installed? Along with Firebug, this is easily the most beneficial plugin in your arsenal. You can validate your html and css with just a keystoke. You can resize your window to view your site at different resolutions. You can edit CSS on the fly (which I use more than any other feature). Do not load Firefox without it. :)

Install


Firebug

Firebug

Equally as powerful as the Web Developer Toolbar, Firebug allows you to inspect every aspect of your document: HTML, CSS, Javascript. See how long it’s taking to load all of your Javascript files. Use the console to debug your documents. View which of your CSS styles are being overridden.

Install



Colorzilla

Colorzilla

You know the drill. You’re working on your website, but you can’t remember the hex value for the red that you’re using. Many people would quickly press “Print Screen”, copy it into Photoshop, and use the eye dropper to grab it.

Or – you can use Colorzilla. This extension works exactly like the eye dropper in Photoshop. You’ll be amazed at how much time this saves you.

Install


Fire FTP

FireFTP

FireFTP is an extension that will allow you to quickly transfer your files to your server. It’s simple, easy to use, and works perfectly. I use this tool five to ten times a day.

Install



IE Tab

IE Tab

Like everyone else, I hate compensating for IE. Even more, I hate spending the extra ten seconds to load Internet Explorer so that I can view my site. Enter IE tab. This plugin will allow you to create a new tab in Firefox that renders the page exactly like IE. Now, you can switch between modes in a second or so. Very, very convenient.

Install


Any tools that I missed?


13

Comments
  • Dan Harper says:

    The day I first discovered Firebug I thought I’d died and gone to heaven :P I don’t know how I got anything done without it!

    I also use a plugin similar to Screen Grab and is equally a massive timesaver! Before this I spent ages lining-up multiple screenshots of a single page!!

    <3 Firefox!

  • Stephen says:

    I’ve heard of and use all of these, except for Screengrab. I’ll give it go though! Thanks.

  • Pablo says:

    Selenium IDE is a great tool for HTML UI testing.

    http://selenium-ide.openqa.org/

  • Stephen says:

    Just tried it out. It’s pretty brilliant. Much more efficient than print screen-ing and cropping.

  • Chris says:

    I use all of these with the exception of ScreenGrab and FireFTP.

    I use SnagIt 9, a great screen capture/screen recording and screenshot editor. It costs a few dollars, but it’s definitely worth it.

    As for http://FTP... I’m using FileZilla right now but I’ll have to check out FireFTP. It looks interesting.

  • adspediaRO says:

    You could also add the foxmarks. The addon allows you to save all your FireFox Bookmarsk on the foxmarks.com website and download them to any location where you get internet connection.

    Imagine being in a office, where you want to show to the customer a specific website and you forgot the URL. Simply install the addon, login to your foxmarks account, pull the list down to the computer you’re using and then find your own bookmark.

  • rossnm says:

    I use all of those except for the screen grab tool, but I also use MeasureIt. You use it to measure out dimensions on the page. So when I’m coding together templates and I can tell I’m off by just a tiny bit on something I can just measure it in firefox and fix it right away.

    Also, when you use ColorZilla, anytime to try to pick the color of something it’ll outline that area’s element (s and stuff) and display it’s class name or id. It’s really useful if I just want to figure out how someone is doing their CSS really quickly.

  • I like the translator!

  • Claudiu says:

    I’m using all of these plugins with 2 exceptions : Screengrab have been replaced by Fireshot which I think it’s more comfortable to use and FireFTP by FileZilla.

    PS: I think that every webdev is already using all of these (and even more)… :D

  • I love CoolPreviews. No need to open a new tab or window to view a link.

  • I use Fireshot instead of Screengrab too. As I look at the list, I’m not sure how I would get along without several of these. I use Firebug, FireFTP and Web Developer literally every day.

  • Stefano says:

    Great roundup, I suggest CODEBURNER as well by Sitepoint guys:

    http://tools.sitepoint.com/codeburner/

    a very handy reference that integrates into Firebug

  • THE MOLITOR says:

    I’ve been using Colorzilla for awhile. Can’t imagine living without it now. Saves me LOTS of time.