A personal site, I Am Proud to be INDIAN and Proud Being HUMAN.

Saturday, 21 August 2010

60+ Firefox Add-Ons For Web Design and Web Development

04:40 Posted by vijay pasham 1 comment
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:


gridfox 60+ Firefox Add Ons For Web Design and Web Development


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 60+ Firefox Add Ons For Web Design and Web Development


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:


firebug 60+ Firefox Add Ons For Web Design and Web Development


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 60+ Firefox Add Ons For Web Design and Web Development


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:


wasp 60+ Firefox Add Ons For Web Design and Web Development


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

1 comment:

  1. 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