Must Have Firefox Add-ons For Web Designers And Developers
User Rating: / 1
PoorBest 

Without much said, Firefox Web Browser is a web browser loved by many web designers and developers. Having the ability to install add-ons, you can customize the web browser to suit your own demanding needs. If you are a web designer or web developer and is not using Firefox Web Browser, then you must be missing something great on the web.

You might want to look into some of the interesting Firefox Add-ons below which will help web designers or web developers to increase their work efficiency.

1. Firebug

Firebug is the best friend for Web Designers and Web Developers, it allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web pages.

Firebug

Add-on Link | Official Link

 

2. Web Developer

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It allows Disable Cache, JavaScript, View Cookie Information, edit CSS, Resize Browser and many more.

Web Developer

Add-on Link | Official Link

 

3. YSlow

YSlow is an extension for FireBug, it will appear as a tab inside FireBug after you have install this Add-on. What YSlow does is it analyzes web pages and tell you why they are slow based on Yahoo’s rules for high performance websites.

YSlow

Add-on Link | Official Link

 

4. FirePHP

FirePHP is also another extension for FireBug. FirePHP enables you to log to your Firebug Console using a simple PHP method call. FirePHP is ideally suited for AJAX development where clean JSON and XML responses are required.

FirePHP

Add-on Link | Official Link

 

5. MeasureIT

Want to know the width and the height of an image or the size of the container in a web page? MeasureIT draw a ruler across any web page to check the width, height, or alignment of page elements in pixels.

MeasureIT

Add-on Link | Official Link

 

6. Colorzilla

The color looks great on the web page, wonder how to find out the color RGB? With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.

Colorzilla

Add-on Link | Official Link

 

7. ScreenGrab

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 into a JPEG or PNG.

Screengrab

Add-on Link | Official Link

 

8. Font Finder

Like a font on a website, want to know what is the font type, font size and font style that appear on web page? Simply use Font Finder and highlight any text element, right-click, and choose font finder. An alert box will appear with all of the styling information you could require including font-size, font-family, color (in both hex and RGB), line-height, letter-spacing, and much much more…

Font Finder

Add-on Link | Official Link

 

9. HTML Validator

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.

HTML Validator

Add-on Link | Official Link

 

10. IE Tabs

Web designer always want to view how their design looks like in other browser. This IE Tabs Add-on is derived from the famous extension IE View, but much different. While IE View always open IE-only pages in a separate Internet Explorer window, IE Tab can view them in a Mozilla/Firefox tab. Now you can compare the differences of your design between Firefox and IE effectively.

IE Tabs

Add-on Link | Official Link

 

11. Operaview

Operaview is very similar to IE View, instead of opening an IE, it open pages in Opera from Firefox and Mozilla context menus.

Operaview

Add-on Link | Official Link

 

12. Window Resizer

Window Resizer accurately resizes your browser so that you can test to see if the web page you are working on looks right in all of the standard resolution sizes.

Window Resizer

Add-on Link | Official Link

 

13. Pencil

Need a simple sketching or GUI Prototyping for your new website? Pencil allow you to sketch and prototyping freely and openly.

Pencil

Add-on Link | Official Link

 

14. Fireshot

Fireshot provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.

Fireshot

Add-on Link | Official Link

 

15. PixelPerfect

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.

PixelPerfect

Add-on Link | Official Link

 

16. Xmark (Formerly Foxmarks)

If you have tons of bookmarks, you cannot miss this out, Xmarks is the #1 bookmarking add-on. Install it on all your computers to keep your bookmarks and (optionally) passwords backed up and synchronized. If something happen to your computer, not to worry, you can retrieve all your bookmarks from Xmarks. Xmarks also helps you uncover the best of the web based on what millions of people are bookmarking.

Xmark (Formerly Foxmarks)

Add-on Link | Official Link

 

17. FireFTP

Need to upload your files online to your web server? Don’t want to install another FTP program? Then try FireFTP. FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

Fireftp

Add-on Link | Official Link

 

18. FlashTracer

Flash tracer is a Firefox extension which enables you to see all the output generated by any running flash SWF movies (the output generated by the trace flash method).

FlashTracer

Official Link

 

19. CSS Validator

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.

CSS Validator

Add-on Link | Official Link

 

20. CSS Viewer

Allow you to view CSS properties of related page elements at glance. Want to know why the CSS style is out of place, this is the Add-on you should use.


CSS Viewer

Add-on Link

 

21. Greasemonkey

Allows you to customize the way a web pages displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available.

Greasemonkey

Add-on Link | Official Link

 

22. Javascript Debugger

Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.

Javascript Debugger

Add-on Link | Official Link

 

23. JS View

All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their Javascripts and style sheets in external files and link to them within a web page. JS View allow you to switch between the Javascript files that the website is using.

JS View

Add-on Link

 

24. Selenium IDE

Selenium IDE includes the entire Selenium Core, allowing you to easily and quickly record and play back tests in the actual environment that they will run.

Selenium IDE

Add-on Link | Official Link

 

25. Console²

Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content).

Console

Add-on Link | Official Link

 

26. Dummy Lipsum

Need some dummy text for a field? Try Dummy Lipsum which will try to detect the field size and fill it with the “correct” amount of text, or you can configure the default values (for each type of field). Lorem Ipsum dummy text is taken from the Lorem Ipsum site.

Dummy Lipsum

Add-on Link | Official Link

 

That’s 26 Firefox 3.0 Add-ons for web designers and developers! Do give these Firefox Add-ons a try, I’m sure you would find them useful. If you have stumble across other cool Firefox Add-ons, you are always welcome to provide them to fill up this featured list.

 

Comments
Add New Search
Rahul  - fan of FireFTP   |2009-06-23 19:06:49
Hi, I'm a big big fan of FireFTP.
Write comment
Name:
Email:
 
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss:
:D:pinch::(:shock::X:side::):P:unsure::woohoo:
:huh::whistle:;):s:!::?::idea::arrow:
Please input the anti-spam code that you can read in the image.

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

Add to Technorati Favorites
JoomlaWatch Stats 1.2.8_04-dev by Matej Koval




Web Design & Graphics (Free) - TOP.ORG

© 2008-2012 httpArtist and wdAward. All rights reserved.
Google Sitemap Generator