Facebook Like

us and stay connect with Onextrapixel on Facebook.

26 Interesting Firefox 3.0 Add-ons For Web Designers And Developers

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.

Posted on: April 22nd, 2009

Terrance

Terrance is a versatile web developer and one of the chief editor of OXP. He enjoys creating functional websites and is particularly engrossed in all the tiny details mixed together to construct great user experiences. He always believe that every web user deserves the best!

Share This Article

  • Share
  • Delicious
  • Stumble Upon

2 Comments & Pingbacks | Add a Comment

  1. August 23, 2009 at 4:08 pm

    Great, i just want to say thank you for bringing in my attention Font Finder and Window Resizer. Wish you all the best.

  2. January 24, 2010 at 1:32 am

    “This is a best station for such kind of articles,your site is a inspiration for me.
    i got so much benefits and good results after visiting here and the grace is increasing
    day by day in your posts”
    the above information is extremly essential……

Please note that comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names. Kindly do not spam, and do not advertise!