Currently Reading: 27 Indispensable Web Design and Development Firefox Extensions
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.
Leave your Comment here
Write your comment below.
61 Comments so far
Trackbacks
- 27 Indispensable Web Design & Development Firefox Extensions : WebLaunches
- 27 Indispensable Web Design and Development Firefox Extensions : Speckyboy - Web Design, Web Development and Graphic Design Resources
- 27 Extensiones para Firefox para Diseño y Desarrollo Web | ProyectoAurora.com
- links for 2008-11-03 | hxf148
- 27 Indispensable Web Design & Development Firefox Extensions | WhiteSandsDigital
- 27 Indispensable Web Design & Development Firefox Extensions | ClydeDennis.com
- Ryan Shull » Blog Archive » Web Development Extensions
- :: Eliax - Para Mentes Curiosas ::
- stephen-turner.net » links for 2008-11-04
- pligg.com
- 27 Indispensable Web Design & Development Firefox Extensions « Internet Making Money
- links for 2008-11-04 » a big guy in a big city
- FF web design extensions « 0ddn1x: tricks with *nix
- The Technology Blog: 27 Indispensable Web Design Development Firefox Extensions
- 27 Oumbärliga tillägg till Firefox för webbdesign « Kenjosan
- Athena Design - The Lounge » Blog Archive » 27 Indispensable Web Design and Development Firefox Extensions
- Selección de 27 extensiones de Firefox indispensable para diseño y desarrollo web » Cosas sencillas
- 27 extensiones para diseñadores de Firefox | Descarga Online Gratis
- Coderies | taggle.org
- Bookmarks for Friday, November 7th — Trevor Fitzgerald
- mirko’s blog » Pour les renard-de-feu-iens
- this weeks link sheet :: MANDLE.ORG
- Neurona Fox » 27 Indispensable Web Design and Development Firefox Extensions …
- 2008年最佳Web设计文章、教程及资源 - 刀客征途
- knightsdesign.biz » 27 Indispensable Web Design and Development Firefox Extensions
- 2008 Most Popular Design posts, Tutorials and Resources | Web Hosting and Domains
- 2008 Most Popular Design posts, Tutorials and Resources | SulVision
















Great list, thanks…
Great list of web design extensions for Firefox! Great for web developers and designers. :)
I use the following extension to save web pages as images:
http://pearlcrescent.com/products/pagesaver/
Full or visible area - FYI
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.
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.
Great list, thanks! There’s a few in there that I had been searching for a while and now I have them. Thanks!
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.
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.
Nice, many thanks.
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.
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
You forgot about FireFTP :)
measure it isn’t that useful when you already have web developer toolbar. it replaces measure it perfectly for me. maybe not for all.
Great list, but can I recommend Codetch (http://www.codetch.com/)? A very handy little code editor that installs as an extension in Firefox.
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.
Don’t the last three do the same thing?
thank you..a valuable resource
Great list. I am using Firebug and CSSViewer.
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.
Nice list, but a fair few of these extensions are found inside the Web Developer one making them a tad redundant!
Great resources for me ! Thanks
Good list, but bad spelling, e.g., “alll”, “developpers”, etc.
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.
Thanks, Great List
As a web developer, how can I complete my work without FireBug? This extension is amazing.
Great list, good job :)
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.
This is really cool for web design. http://www.artdigitalonline.com
Screengrab! In the second attempt does not work :-(
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
This is a very informative post. Great list. I am sure, this will surely help especially for my web design tasks
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
Great, i only knew firebug
Web designing and development is easy on firefox.
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/