Serious Firefox users know that it’s potential cannot be unleashed without the power of add-ons. Gladly, there are add-ons available for almost everything that can boost up your creativity and make things easy for you. Here we focus on great add-ons related to graphic design, web design and web development:

CSS & Design:

CSS Mate: Offers easy inline CSS editing.

EditCSS: Puts a stylesheet modifier in your sidebar.

Font Finder: See full CSS text styling of the selected element.

JSView: View the actual JS or CSS files behind any source code.

Firefinder: Find HTML elements matching chosen CSS selectors.

Stylish: A valuable add-on to manage user styles.

Dust-Me Selectors: Finds unused CSS selectors from a single web page or entire site.

Palatte Grabber: Creates a color palette for image editing softwares like Photoshop and GIMP based on the current web page.

GridFox: Draws a grid on top of any web page. A good testing tool for sites with a grid-based design.

Measure It: Adds a virtual ruler on the screen to measure pixel width and height of any element on a web page.

ColorZilla: Includes color related tools like EyeDropper, ColorPicker and PageZoomer.

APNG Edit: Editor for creating animated PNG images.

Firesizer: Allows you to resize a window to specific dimensions.

Testing:

Html Validator: Validates Html and shows number of errors on an Html page.

IE Tab: Embeds Internet Explorer in tabs of firefox. An excellent tool to see how a web page looks in IE.

OperaView: Opens up a web page in the Opera browser. Good for quick cross-browser testing.

Total Validator: Performs Html validation, accessibility validation, broken link checking, spell checking and takes screenshots using 36 different browsers.

XSS Me: Find Cross-Site-Scripting (XSS) vulnerabilities in a web application.

HackBar: A security audit and penetration test tool.

Access Me: Tells you how vulnerable a website is to attackers and unauthinticated users.

SQL Inject Me: Find SQL injection vulnerabilities in a web application.

Molybdenum: Create, record, edit and run web tests easily.

Regular Expressions Tester: Allows developers to test regular expressions.

Firefox Accessibility Extension: Test your website for functional accessibility for people with disabilities.

CSS Validator: Validates a web page for CSS using the W3C rules.

WAVE Toolbar: Evaluate accessibility and usability of a website for people with disabilities.

TAW3 With A Click: Website accessibility testing based on W3C Web Content Accessibility Guidelines.

YSlow: Analyzes web pages to understand why they are slow. Based on Yahoo!’s Smush.it service.

HTML Regex Data Extractor: Test Regular Expressions on live HTML content.

DeBugging:

JavaScript Debugger: A powerful debugger for Javascript.

Firebug: Allows you to edit, debug and monitor CSS, Html and JavaScript live for any web page.

Drupal For Firebug: A debugging tool specifically for Drupal.

WYSIWYG Editing:

Codetch: A dreamweaver like tool that lets you edit web pages as you surf them.

BBComposer: Allows you to edit the text area contents by switching to a WYSIWYG mode.

Platypus: A WYSIWYG webpage editor.

Wyona Yulup: Allows editing of plain-text, HTML, XHTML and XML in either source or WYSIWYG mode.

Mozile: A WYSIWYG tool for editing XHTML and XML+CSS.

Web Development Utilities:

Web Developer: Adds a menu and toolbar with various web developer tools.

CacheViewer: A graphical interface to manage the about:cache page.

PHPLangEditor: A GUI for translation of language files of your PHP scripts.

DOM Inspector: Inspect and edit the live DOM (Document Object Model) of a web document.

InspectThis: Inspect the current element with the DOM inspector. Ideal tool for Ideal for AJAX, DHTML and JavaScript.

Pixel Perfect: Overlay a web composition on top of the developed Html.

Library Detector: See what JavaScript libraries are being used on a web page.

Execute JS: Enter and execute JavaScript code.

Redirect Cleaner: Cleans redirects from links.

Server Switcher: Switch between your development and live servers.

User Agent Switcher: Quickly switch between user agents of a browser.

View Dependencies: See all the files that are loaded to show a particular web page.

Tamper Data: View and modify HTTP and HTTPS headers and post parameters.

Plain Old Webserver (POW): Uses Server-side Javascript to run a server inside your browser.

XHTML Ruby Support: Adds XHTML Ruby support. Works with simple and complex ruby.

Load Time Analyzer: Measure how long web pages take to load in firefox.

WhatMon: Monitors usage and other server statistics.

CrossFTP: Access FTP services from your browser.

JSON Request: Exchange data between scripts on web pages and JSON data server.

Web Analytics Solution Profiler (WASP): QA tool for web analytics.

PageDiff: Compare HTML code between two web pages.

ReloadEvery: Auto-refresh web pages after a certain time.

Google Site Indexer: Creates Sitemaps based on Google queries for better SEO.

XML Developer Toolbar: Access standard set of tools for XML development right within your browser.

These add-ons can make life super easy for designers and developers. They eliminate the need for a number of software and also save your computer a lot of memory and processing.

What other add-ons can you think of to add to this list? Which ones are your favorite among these?

Don't miss another article. Subscribe by RSS Feed or by Email today!