10 Firefox Add-Ons Every Web Developer Should Be Using
Posted by JP on January 19th, 2010 in Workflow | 16 Comments
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
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
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 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
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
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
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
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 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
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.
Jan 19, 2010 at 3:42 am
If you like this post, digg it at http://bit.ly/7k4kQY
Jan 19, 2010 at 4:52 am
Hey! Really great article, I think every web developer should know this.
Thanks
Jan 21, 2010 at 10:29 am
Nice article. The addons that you have mentioned are awesome.
Jan 22, 2010 at 3:11 pm
What about “FireFTP”(Great tool) or “Html Validator” or “Print Preview”(for print stylesheets)
:)
Jan 22, 2010 at 3:19 pm
Yeah those are nice as well, especially FireFTP.
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.
Feb 01, 2010 at 3:15 pm
Hey, I can’t live without Firebug. I love this plugin more than others plugin. :)
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
May 30, 2010 at 12:07 am
I already have some, will look into the rest! Thanks for sharing!
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.
Oct 24, 2010 at 1:40 pm
thanksfor the list, i also use some of them
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.
Oct 25, 2011 at 3:58 pm
Your blog provides us a very great information. Its helpful to this topic for find some result.
Mar 07, 2012 at 7:01 am
it’s a pleasure to run across your site. As they say one cannot be too careful.
Apr 17, 2012 at 1:29 pm
a DOM inspector, detailed information about page elements, and much, much more.sd
Sep 28, 2012 at 4:37 pm
4. Web Developer installed it is created by chrispederick. Thanks to you and its author.