A collection of extensions for your every Design and Development need, from Editing CSS and Database Management to Image Capture and Color Pickers.
If there are any you feel I have missed, just leave a comment.

Web Design and Development Extensions for Firefox

URL : MeasureIt.
Description : MeasureIt draws a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

URL : Firebug.
Description : Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

URL : View Source Chart.
Description : View Source Chart Extension draws a color-coded chart of a webpages source code and displays source in its altered state after the DOM has been manipulated by JavaScript

URL : Web Developer.
Description : The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.
Features : Clear Session Cookies ; Display Element Information ; Display Image File Sizes ; Display Ruler ; Display Topographic Information ; Edit CSS ; Show Comments…

URL : NoScript.
Description : NoScript Firefox extension provides extra protection for Firefox, Flock, Seamonkey and other mozilla-based browsers: this free, open source add-on allows JavaScript, Java, Flash and other plugins to be executed only by trusted web sites of your choice.

URL : Greasemonkey.
Description : This extension allows you to customize the way a webpage displays using small bits of JavaScript.
Hundreds of scripts, for a wide variety of popular sites, are already available at userscripts.org.You can write your own scripts, as well.

URL : FoxyProxy.
Description : FoxyProxy is a free, open-source advanced proxy management tool that completely replaces Firefoxs limited proxying capabilities. FoxyProxy automatically switches an internet connection across one or more proxy servers based on URL patterns. Put simply, FoxyProxy automates the manual process of editing Firefoxs Connection Settings dialog.

URL : DOM Inspector.
Description : DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.

URL : sqlite-manager.
Description : Manage all your sqlite databases using this lightweight extension for firefox, this extension will be useful to developers who want to create and play with sqlite databases.

URL : QuickJava.
Description : QuickJava is a Firefox plugin that allows you to easily enable/disable the Java and Javascript from the toolbar. Two icons are placed in the toolbar, click on them to toggle the state. If you right click either icon it will update both icons.

URL : FirePHP.
Description : FirePHP enables you to log to your Firebug Console using a simple PHP method call, alll data is sent via response headers and will not interfere with the content on your page.
FirePHP is ideally suited for AJAX development where clean JSON and XML responses are required.

URL : CSSViewer.
Description : A simple CSS property viewer.

URL : EditCSS.
Description : The Editcss project is an easy way for web developpers to edit and modify currently loaded stylesheets.

URL : Browser Window Resizer.
Description : The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you are working on looks right in all of the standard resolution sizes.
Window resizer supports the 640×480, 800×600, 1024×768, 1280×1024, 1600×1200 resolution sizes.

URL : Table2Clipboard.
Description : This extension adds two menu items, one in Edit menu and the other one on context menu. The item on Edit menu is always visible but grayed if no table cells are selected. The item on context menu is visible only when table cells are selected. To select table cells you must hold down Control key and click on cells to copy.

URL : YSlow for Firebug.
Description : YSlow analyzes web pages and tells you why they are slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool.

URL : Extended Statusbar.
Description : A Statusbar with speed, percentage, time and loaded size.

URL : Dummy Lipsum.
Description : This extension generates “Lorem Ipsum” dummy text.

Validation and Aceesibilty Extensions for Firefox

URL : CSS Validator.
Description : CSS Validator is a Mozilla Firefox extension which Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated.

URL : Html Validator.
Description : 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 details of the errors are seen when looking the HTML source of the page.

URL : Firefox Accessibility Extension.
Description : This Mozilla/Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate web content. Developers can use the extension to check their use of structural and styling markup that support functional web accessibility.

URL : Total Validator.
Description : The Total Validator Firefox extension provides one-click validation. Once installed all you do is browse to the page you want to validate then click on the TV icon in the browser status bar.

Imaging and Screen Capture Extensions for Firefox

URL : Image Zoom.
Description : Image zoom gives you complete control of the size of most images displayed in mozilla based software. Both individual images or whole pages of images can be zoomed.

URL : ColorZilla.
Description : Advanced Eyedropper, ColorPicker, Page Zoomer and other tools.

URL : Screengrab!.
Description : Screengrab! is an extension for Firefox that makes it easy to save a web-page as an image. With it, you can save anything that you can see in a browser window - from a small selection, to a complete page.

URL : FireShot!.
Description : FireShot is a extension for Firefox and Internet Explorer that captures, edits, annotates, organizes, exports and prints screenshots of your web pages.

URL : Abduction!.
Description : Capture an entire web page or part of a web page and save it as an image.

61 Comments so far

1. Milad on November 3, 2008 1:15 am

   Great list, thanks…

2. Daniel Richard on November 3, 2008 1:33 am

   Great list of web design extensions for Firefox! Great for web developers and designers. :)

3. Dan on November 3, 2008 12:17 pm

   I use the following extension to save web pages as images:
   http://pearlcrescent.com/products/pagesaver/

   Full or visible area - FYI

4. PB on November 3, 2008 1:03 pm

   You really only need two of these to get everything done: firebug and webdeveloper. Most of the other extensions listed here just duplicate their functionality. ColorZilla looks pretty cool, but like the screen capture extensions, your os can do it for you.

5. Mark on November 3, 2008 1:11 pm

   These extensions are in fact dispensable. They’re not ALL necessary. For example, you can browse the DOM, edit HTML/CSS on-the-fly in Firebug, so you don’t need a ton of the other ones. Honestly, as a web developer myself, you only need Web Dev toolbar and Firebug. Those two do just about as much as you need.

6. Sam on November 3, 2008 1:14 pm

   Great list, thanks! There’s a few in there that I had been searching for a while and now I have them. Thanks!

7. Tim Wilson on November 3, 2008 1:27 pm

   Web Developer has a measuring tool built in. If you’re going to install Web Developer, do it before you install MeasureIt. The ruler in Web Developer might be enough for you. You’ll find it under Miscellaneous…Display Ruler.

8. Chris Pratt on November 3, 2008 1:33 pm

   MeasureIt and EditCSS should have been retired from these sort of lists long ago. They both inevitably get featured along side Web Developer Toolbar which has the functionality of both baked in. You can do about 99% of any web development work you would need to do with the powerhouse combo of Web Developer and Firebug.

9. marc on November 3, 2008 1:34 pm

   Nice, many thanks.

10. MicroAngelo on November 3, 2008 1:38 pm

    Excellent list of web development extensions - but remember that each extension will use resources and potentially slow FF down.

    I’d recommend The Web Developer Toolbar, FireBug & ColorZilla - these three will do 80% of this entire list on their own.

11. brian on November 3, 2008 1:48 pm

    Awesome list dude…but I think there a lot more. Is this list for FireFox 3.0 only or some supports FF2 also?

    http://www.livbit.com

12. Amnon on November 3, 2008 1:59 pm

    You forgot about FireFTP :)

13. bored on November 3, 2008 2:12 pm

    measure it isn’t that useful when you already have web developer toolbar. it replaces measure it perfectly for me. maybe not for all.

14. Mark Price on November 3, 2008 2:59 pm

    Great list, but can I recommend Codetch (http://www.codetch.com/)? A very handy little code editor that installs as an extension in Firefox.

15. Iliya on November 3, 2008 3:21 pm

    half of those are covered by firebug and web developer TB. I don’t actually need 2 extensions to view my css or to disable JS… thanks for posting anyway, there are some i didn’t know about.

16. AntonioCS on November 3, 2008 5:38 pm

    Don’t the last three do the same thing?

17. ismara novack on November 3, 2008 6:43 pm

    thank you..a valuable resource

18. Dicky on November 3, 2008 7:13 pm

    Great list. I am using Firebug and CSSViewer.

19. SEO Sultan on November 3, 2008 7:28 pm

    The web designer toolbar takes care of most of those. So this list has a lot of overlap, no need for the ruler or validation tools, or or css viewer or noscript or java enabler. It’s all in webdev toolbar I’m happy to say.

20. Brendo on November 3, 2008 9:43 pm

    Nice list, but a fair few of these extensions are found inside the Web Developer one making them a tad redundant!

21. Danh ba web 2.0 on November 4, 2008 5:28 am

    Great resources for me ! Thanks

22. Xay on November 4, 2008 6:56 am

    Good list, but bad spelling, e.g., “alll”, “developpers”, etc.

23. jive on November 4, 2008 8:32 am

    Many of these extensions aren’t needed if you have Firebug and Web Developer installed. I’d suggest to dive into both tools a little more and see what buried goodies you can find in them. Web Developer does a lot of things.

24. Thomas on November 4, 2008 9:24 am

    Thanks, Great List

25. Vu N on November 5, 2008 4:45 am

    As a web developer, how can I complete my work without FireBug? This extension is amazing.

    Great list, good job :)

26. Dominic Taverniti on November 5, 2008 10:35 am

    I would also suggest the following Firefox add-ons for web workers:
    DownThemAll! (download images, files, ect from sites.), IE Tab, SeoQuake, Super DragAndGo (2.x). If you’re still on FF2, give Super DragAndGo a try and you may not upgrade until 3+ is supported.

27. aalmeida71 on November 6, 2008 7:47 am

    This is really cool for web design. http://www.artdigitalonline.com

28. IALZA on November 7, 2008 1:47 am

    Screengrab! In the second attempt does not work :-(

29. Nicole on November 13, 2008 9:46 pm

    And if you want to drive referral traffic to your site, you need to add the new app from Grouptivity. Information Week is using it to increase engagement - something to think about in the development process.
    http://www.grouptivity.com/main/save_share.php

30. Roy Van Rivero on November 19, 2008 7:54 am

    This is a very informative post. Great list. I am sure, this will surely help especially for my web design tasks

31. Tobi on November 23, 2008 5:33 am

    Nice selection. I miss yslow and livehttpheaders which are both great and usefull extensions. But a good reference for the best and most important add-ons!

    Take care
    Tobi

32. jd on November 26, 2008 4:16 pm

    Great, i only knew firebug

33. Peter on December 3, 2008 1:51 am

    Web designing and development is easy on firefox.

34. Bob on December 12, 2008 2:10 am

    Great list. Firebug is the greatest extension ever made! Youlicit is great when searching for libraries, tips and techniques:
    http://www.youlicit.com/download/

    And Javscript Debugger is a bit clunky but amazing once you learn to use it: http://www.mozilla.org/projects/venkman/

Our Sponsors

Looking for Something?

Popular Articles

Latest on Speckyboy