Firefox is used by majority of Internet users ,and same is the case with web developers and web designers.
Here is the data on the percent of different browser users and their percent in the internet market as of this post (proving how useful Firefox is)
One of the best parts about Firefox is that it has active plugins and development community ,that caters almost every section of the internet user(be it web developers ,designers ,bloggers and so on ..)
Here is a list of 50 or so, of the Firefox plugins that I have found to enhance my productivity as a web developer and designer.
1. Firebug (Recommended for web designers and web developers)
Firebug is one of the most famous Firefox extension used by most of the web developers and designers.
Here are some of the sub add ons for firebug.
The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.
Pixel Perfect is a Firebug extension and allows web designers and developers to conveniently place/overlay a web composition over top of an already developed HTML.
It is a simple cookie manager for firebug that enables you to manage cookies of a webpage,create new cookies and their permissions etc.
An easy to firebug sub add on ,which lets you easily pick colors from the web.
If you like firebug then this can take the place of colorzilla,although it lacks some of the functionalities of colorzilla.
YSlow is a usefull add-on for Firebug useful especially for bigger sites. Used in combination with Googles Page Speed, web designers and developers have two powerful tools for analyzing web page load times and what is causing the slow down of their web pages.
10. Web Developer
This Firefox add on falls in the same league as the firebug ,and has pretty much same functionality ,except that all the tabs for launching different web page inspectors are aligned in the form of tabs in your browser.
we personally feel that firebug is good for new/novice web developers and web designers ,where as web developer is a bit advanced.
After you are done with your web page designing some of the times their are few CSS selectors that you are not using but they are adding to the size of you style sheet.Dust-Me Selector finds out these unused css selectors and helps you decrease the load time of the web page you have designed.
14. CSS Viewer
It is a simple css property viewer and is useful if you want to look at only the css properties of web pages.
This functionality is present in both Firebug and Web developer,so its not that useful.
15. Edit CSS
16. CSS Reloader
Allows you to reload only the CSS sheet(style sheet) without having to reload the whole web page.
Lets you easily compare the html codes of two different web pages.
18. X-Ray (One of the best firefox add ons for web developers and designers.)
Shows you the web pages with the their html tags right in your browser windows ,without even inspecting any element.
The image above will make it easier to understand what it exactly does.
19. Browser View plus(BVP)
This firefox add on enables you to launch a web page in the browser of your choice(of course you need to have the browser that you want to see your web design needs to be installed in your computer) and hence is one of the best firefox add on for web designers & Web developers.
After you have located the browsers that you would like to view your web pages in ,all you have to do is either right click on the page and select the browser that you want your web page to see on.
Another alternative is that you can customize your firefox toolbar and drag the icons of browsers to your toolbar.To see a web page in a different browser ,just click on the icon of the browser once you are in the webpage you want to inspect.
20. IE Tab
This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.
Similar to Browser view plus but provides you with the option to view your web page in Internet explore only and you do not need to have IE installed in your computer.
21. Opera view
This firefox extension is similar to IE tab and you need to have opera installed in your computer to use it.
Note:- It is best to use Browser view plus as it gives the option to see your web page designs in all the browsers you want to and is much more flexible in functionality.
In you case you want to see how your web design looks in IE only then IE tab is best.
Tired of changing the resolution all the time just to have a look at how your web design looks in different resolutions?
Windows resizer is the exact solution that you need ,it accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes. Supports the 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200 resolutions
23. Total Validator (Recommended)
It is always a pain when you make a web design for a client and the design that is not W3C valid ,this is a simple solution to the problem as using total validator you can validate any web page you want ,be it an online or an offline(your local installation) page.
Your web pages are validated by using the Total Validator service.
24. HTML Validator
HTML Validator adds HTML validation inside Firefox. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution).
Download for Windows (From the official Firefox add on repository)
Download for other operating systems (From the Skynet Website)
Pencil is a simple and practical a tool which should be in the arsenal of every web-application designer.
26. Pixlr Grabber (Recommended)
This is a light weight and easy to screed capture add on that lets you take screen shots of web pages and edit them ,you can also edit the images without actually saving them to your computer.
Has a image editor of its own ,which has looks and functionality some what similar to Adobe Photoshop.
27. Fireshot (Recommended)
Works just like any of screen capture application but is meant specifically for firefox and you can capture the screen of the web page or any section of a web page that you select.
This plug-in provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations and is useful for web designers and web developers.
28. Screen Grab
Great app for making a print screen. Useful for web designers to capture the screen without pain to crop the image first before use.Just only copy the selection, and you can paste it everywhere you want including Photoshop.
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
If you are using firebug then you can try Firepicker as a replacement for colorzilla.
30. Rainbow (Recommended for Web Designers and developers)
A nice add on ,that allows you do all the stuff that you can do with colorzilla and is a good alternative to colorzilla.
Nice and easy tool for measuring the dimensions of a part of a web page in pixels.
This Add-on allows you to right-click any image on the web and extract the 12 most common colors from it,and then use those colors to make pallets that can be used in Photoshop ,GIMP and other photo editing software’s and hence useful for web designers who are into Photoshop and image editing field.
Note:- You cannot use this tool in your local host.
33. Dummy Lip sum
Lets you easily get the dummy text and content for your testing environment and is thus good for web designers.
34. Autofill Forms
Makes filling forms nice and easy .
You can fill forms (any form) with just a click and your custom keyboard shortcuts.
Surely is a time saver and thus will improve your productivity as a developer.
35. Font Finder
Useful for designers, developers and typographers. It allows a you to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.
You can disable all the font-families in a web page and hence analyze how your web design will look in different OS and conditions when you are using custom font.
36. Context Font
This add on is a must for Web designers who like typography.
Gives you all the information about the font of the text the you select in a web page and also gives the download source for the font if one is specified by a @font-face rule.
37. It’s All Text
Allows you to write and edit in the web in text editor of you choice.
It is really easy to use and will surely make you more creative while you comment on other blogs or make notes at other places in the web.
38. CacheViewer (Recommended)
This Firefox add on does what it says.
It allows you to see and extract the cache saved in the about:cache files of your browser.
Can be used for all sorts of purposes.
39. Modify Headers
Add, modify and filter http request headers. You can modify the user-agent string, add headers to spoof a mobile request (e.g. x-up-calling-line-id) and much more.
Monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.Good for web developers to make things streamlined and easy.
41. Tamper Data
Use tamperdata to view and modify HTTP/HTTPS headers and post parameters.
42. Fire Ftp
Integrates a nice FTP client right within your firefox browser,
One of the best firefox add on for web developers and designer.
43. Greasemonkey (Recommended)
Their are many scripts that you download or develop your own.
44. View Source Chart (Recommended for Web developers)
Allows you to inspect the DOM at lightning speed and is a packed with real cool visualization of DOM.
45. DOM Inspector
DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application.
A good alternative to View Source Chart
46. Server Switcher
Allows you to switch between your development(local host) and live server with just a single click on the icon that is created on the address bar of your browser,so that you can see and analyze the difference between the two.
Allows you to remove unwanted elements from a web page(good when you want to print a web page),block advertisements(gives you ad free browsing) and packed with many more useful features.
After having talked about all those useful (and may be some useless) add ons ,you do need to have our all the extensions synchronized between different computers and FEBE is does just that .
It creates a .xml file that you can use to backup your add ons and then use this same .xml file to synchronies the add ons between different computers.
Still in the beta phase but works pretty nicely.It will manage and sync all your Add-ons with your different computers. It will also save your Add-on list if you ever need to reinstall Firefox.
50. X Marks
At the end of the day you have lots of bookmarks and their is absolute necessity to have a synchronization of these bookmarks between different computers that you use.
X marks is just the right tool to do it and it also synchronizes your passwords between different computers and operating systems.