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.
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.
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.
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.
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!
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.
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.
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 1024×768, 1280×1024, 1600×1200, etc.
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.
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.
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.
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.