ColorZilla allows you to get the color code from every pixel in your browser. You can also zoom the page and measure the distance between two points on the page. ColorZilla comes with a built-in palette browser that allows you to choose colors from pre-defined sets. A simple but extremely useful tool.
Firebug is the Swiss pocket knife for web developers. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. This is an easy to use plugin packed with tons of features that makes it a real time-saver. Definitely a must-have!
There’s also a great add-on for Firebug called Codeburner. CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.
Firebug also allows you to manage your cookies. All you have to do is install Firecookie. Use this extension to create a new cookie, delete existing cookies, see list of cookies for current site, manage cookies permissions and a lot more.
TinEye is the first image search engine on the web to use image identification technology rather than keywords, metadata or watermarks. This plugin compares the selected image with every other image in their database. TinEye does not typically find similar images; it finds exact matches including those that have been cropped, edited or resized.
SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension. It give you an overview of your website’s most important SEO components and an analysis of on-page SEO criteria.
This plugin adds a toolbar to Firefox that is packed with useful tools for web developers. This really is the tool you’ve been looking for. It speed up the entire website development process so much that you’ll wonder how you could have ever lived without it.
FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part). There’s also an arsenal of tools available to edit these screenshots. Save the screenshot as PNG, JPG, BMP or GIF and send them to friends, family or colleagues.
The most famous dummy text comes to Firefox. This plugin generates a lorem ipsum dummy text automaticaly (minimum 5 words). A simple plugin that could come in handy for some web developers.
GridFox draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout. You have to input the grid manually by entering the width of the website, the number of columns and the line thickness.
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution).
See how your website is displayed in Internet Explorer. With a simple click you can open it in a new tab. This means that you can easily switch between different browsers.
If you enjoyed this article, please consider sharing it:
Thanks for sharing those plugins, Chris. I’ll check them out asap. Search Status sounds really interesting.
Great list, thanks for sharing.
YSlow is great for checking site optimization.
Check it out!
Thy for sharing those plugins, bookmarked
Another useful firefox add-on for web designing is the Measurelt. You can make accurate measurements of your web site without using any photo editing tool.
Firebug is, indeed, great.
I’d also say that Spell Checker is pretty useful to run on any site’s you’ve built, as people are going to be put-off by a site full of spelling mistakes.
This is a really helpful list for developers out there using Firefox. I’ve had a couple of these in my developers toolbox for a while now. Do you have a similar list of plugins for Chrome? I’ve started using that browser as of late as Firefox was getting too memory-hungry for me!
wow..
nice share..
This is a really helpful list for developers out there using Firefox.
thanks..
I have been using firebug and just love it.
Seems I have found few more very useful extensions.
Great List and thanks 4 sharing.
Yup, thumbs up for Firebug… EXCEPT, I’ve just found out a bug in it prevents Jquery AJAX requests to work in some cases. Had me stumped for hours!
Some good add ons which I didnt know about. Here are some others, SEOmoz toolbar, Web Developer tool bar. Firebug is the most useful I find.
Also check out MeasureIt, a handy tool which helps to verify height, width and alignment of page elements.