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.

RSS & Share

• Subscibe via RSS
• Follow us on Twitter
• SDM on FriendFeed
• SDM on Facebook
• Del.ici.ous Bookmark
• Stumble Speckyboy!
• Add to Technorati

Worthy Links

• Smashing Magazine
• Design Reviver
• N.Design-Studio
• WebDesigner Depot
• Blog.SpoonGraphics
• Spyre Studios
• Six Revisions
• Vandelay Design
• Web Design Ledger
• Onextrapixel
• DesignerFix
• 1stWebdesigner.com
• Pink Moustache

Categories

• Ajax/Javascript
• Cheat Sheets
• CSS
• Firefox Extensions
• Fireworks Extensions
• Fonts
• Free Icons
• Graphic Design
• Icon Design
• Logo
• Patterns
• Photography
• Photoshop
• Showcase
• Tutorials
• Typography
• Vector
• Web 2.0 Apps
• Wordpress
• Wordpress Plugins
• Wordpress Themes
• • View all Categories »

We are a proud member of the...

Mini Icon for only $13

Are you one of our Facebook fans?