27 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

Web Design and Development ExtensionsURL : MeasureIt.
Description : MeasureIt draws a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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

Web Design and Development ExtensionsURL : 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…

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : CSSViewer.
Description : A simple CSS property viewer.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : Extended Statusbar.
Description : A Statusbar with speed, percentage, time and loaded size.

Web Design and Development ExtensionsURL : Dummy Lipsum.
Description : This extension generates “Lorem Ipsum” dummy text.

Validation and Aceesibilty Extensions for Firefox

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : 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

Web Design and Development ExtensionsURL : 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.

Web Design and Development ExtensionsURL : ColorZilla.
Description : Advanced Eyedropper, ColorPicker, Page Zoomer and other tools.

Web Design and Development ExtensionsURL : 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.

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

Web Design and Development ExtensionsURL : Abduction!.
Description : Capture an entire web page or part of a web page and save it as an image.

(648 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter.