10 Firefox Add-Ons Every Web Developer Should Be Using

10 Firefox Add-Ons Every Web Developer Should Be Using

Most web developers out there know that there is no browser better than FireFox for developing websites. This is because of all the amazing add-ons the FireFox community has created over the years to help make FireFox the browser of choice for most of us.

In this article I'm going to show you 10 FireFox Add-Ons that every web developer should be using.

1. FireBug

FireBug for FireFox

I think for most web developers, FireBug needs no introduction.
But for those of you who are new to the web development world, FireBug is a revolutionary FireFox extension that helps web developers and designers test and inspect front-end code. It provides us with many useful features such as a console panel for logging information, a DOM inspector, detailed information about page elements, and much, much more.

For those of you who are completely new to FireBug and want to get the most out of it asap, be sure check out this tutorial.

Get the Add-On: FireBug

2. Font Finder

Font Finder for FireFox

Ever wondered what font a particular site was using in its h3 tags or what font size they're using? Well, Ben Dodson created the perfect FireFox Add-On to find out all the CSS Styles of a selected piece of text. With Font Finder you just select a piece of text, right click and click on Font Finder to know what CSS Styles is used on the selected piece of text.

Get the Add-On: Font Finder

3. ColorZilla

ColorZilla for FireFox

ColorZilla is a simple but extremely useful tool for front-end web development. Just click on the icon, hover over the area you'd like to know the hex color for, and click. It saves a lot of time that used to be used by digging through CSS or copying images to a photo-editing tool.

Get the Add-On: ColorZilla

4. Web Developer

The Web Developer add-on gives you the power disable CSS, edit CSS on the fly, measure certain areas of a page and much more. It's definitely a must-have for any web developer!

Get the Add-On: Web Developer

5. IE Tab

IE Tab for FireFox

Every Web Developer knows how much pain Internet Explorer is when developing websites.
The thing is, we don't always have an old version of IE installed or want to open Internet Explorer just to try out something. This add-on gives you the ability to open internet explorer in a new tab within firefox itself.

Get the Add-On: IE Tab

6. SeoQuake

SEO Quake for FireFox

SeoQuake is a SEO add-on for FireFox focused at helping web developers who deal with search engine optimization (SEO). SeoQuake allows to obtain and investigate many important SEO parameters on the fly, save them for future work, compare them with the results and more.

Get the Add-On: SeoQuake

7. Window Resizer

Window Resizer for FireFox

When creating a new layout, we need to make sure the layout is displayed properly in the standard resolutions of today. With this add-on it's just a click away to resize your browser to a standard resolutions such as 1024x768, 1280x1024, 1600x1200, etc.

Get the Add-On: Window Resizer

8. YSlow

YSlow for FireFox

With more and more people seeing the importance of having a highly optimized website, tools like Yahoo's YSlow and Google's Page Speedmake our life allot easier by telling us exactly what aspect of our website's performance needs improvements and how it needs to be done and in some cases it even does it for you. YSlow also provides lots of information like the amount of time it took to load the page, the amount of images there is on the page, gives your website a grade based on its performance and much more.

Get the Add-On: YSlow

9. Screengrab

Screengrab for FireFox

Screengrab makes taking screenshots of a webpage a breeze. All you need to do is click on the icon, then choose wether you want to save the visible portion, selected portion or the entire page. You then have the option to choose to save your image as a JPEG or PNG.

Get the Add-On: Screengrab

10. Total Validator

Total Validator for FireFox

This 5-in-1 validator makes validating websites much easier by checking HTML, links, CSS and doing a lot more. It also does accessibility validation, checks for broken links, spell checking(in 5 different langagues),
take screenshots via different browsers & operating systems to see how your web site looks.

Get the Add-On: Total Validator


Let me know which FireFox plugins you guys use on a daily basis that aren't on this and that more people need to know about.

Related Articles



Tags: , , ,

17 Comments

  1. 1 JP says:
    Jan 19, 2010 at 3:42 am

    If you like this post, digg it at http://bit.ly/7k4kQY

  2. 2 Michael says:
    Jan 19, 2010 at 4:52 am

    Hey! Really great article, I think every web developer should know this.
    Thanks

  3. 3 Bharani M says:
    Jan 21, 2010 at 10:29 am

    Nice article. The addons that you have mentioned are awesome.

  4. 4 Kartlos Tchavelachvili says:
    Jan 22, 2010 at 3:11 pm

    What about “FireFTP”(Great tool) or “Html Validator” or “Print Preview”(for print stylesheets)
    :)

  5. 5 JP says:
    Jan 22, 2010 at 3:19 pm

    Yeah those are nice as well, especially FireFTP.

  6. 6 Johan Svahn says:
    Jan 27, 2010 at 11:54 am

    Great article! I can’t say that I’m using it on a daily basis, but a nice FF plugin is the Selenium IDE. Great tool for automatic functionality testing.

  7. 7 Baloot says:
    Feb 01, 2010 at 3:15 pm

    Hey, I can’t live without Firebug. I love this plugin more than others plugin. :)

  8. 8 JP says:
    Feb 01, 2010 at 10:28 pm

    @Baloot: i can’t live without it either! That’s one of the plugins preventing me from using chrome

  9. 9 Larissa Manning says:
    May 30, 2010 at 12:07 am

    I already have some, will look into the rest! Thanks for sharing!

  10. 10 Austin web development says:
    Jul 12, 2010 at 3:09 pm

    Love nearly all of these. I’ve recently started using SEOQuake and think it’s one of the best resources around for quickly finding a site’s page rank and other SEO parameters – as soon as you have it installed, it’s visible every time you do a Google search.

    I’ve also found FontFinder and Colorzilla really helpful when designing.

  11. 11 cari uang says:
    Oct 24, 2010 at 1:40 pm

    thanksfor the list, i also use some of them

  12. 12 dissertation examples says:
    Sep 23, 2011 at 3:29 am

    I like it very much. I have installed seoquake this adon is very useful for seo link back checking.

  13. 13 online auto news says:
    Oct 25, 2011 at 3:58 pm

    Your blog provides us a very great information. Its helpful to this topic for find some result.

  14. 14 Michael Jackson Lyrics says:
    Mar 07, 2012 at 7:01 am

    it’s a pleasure to run across your site. As they say one cannot be too careful.

  15. 15 SEO says:
    Apr 17, 2012 at 1:29 pm

    a DOM inspector, detailed information about page elements, and much, much more.sd

  16. 16 Hyder says:
    Sep 28, 2012 at 4:37 pm

    4. Web Developer installed it is created by chrispederick. Thanks to you and its author.

  17. 17 หี says:
    Oct 18, 2014 at 7:20 am

    หี

Leave a Comment