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?
Credits : Ijaar
hello, I just wanted to say that I really enjoyed your site and this post. You make some very informative points. Keep up the great work!
ReplyDelete