We can confidently say that Firefox is the most popular browser among web designers and developers after Google Chrome. One of the leading factors that make the Firefox browser preferred over others is that it has a huge library of plug-ins and extensions. Among this list of extras, there are plug-ins specifically for web designers and developers. You can check my earlier post if you are interesting in Chrome extensions for Developers.
Great web page validator extension for Firefox. HTML Validator icon winks at you from the status bar of the browser. It shows the number of errors on the loaded HTML page. You can open an HTML code in the plugin and see the error position in the code.
2. CSS Viewer
There are times when you visit a website, that has implemented interesting CSS trick and you want to copy that. With this extension you can view the CSS properties and even download it on your local machine to play with it.
Often developers need to measure any element on the page. With MeasureIt, simply select an item and immediately know the element scale.ColorZilla also offers similar functionality however, if you only need to measure, it is better to use MeasureIt.
Great firefox plugin for Search engine optimizer, it helps you to analyze the website in search engine and shows the report.
This expansion creates a color palette which is then exported to various image editors, including Photoshop , Paint Shop Pro, and many more. This plugin is very helpful if you are a website designer and use Photoshop for your designing.
View the source code of the site by standard means of Firefox is quite uncomfortable. The code is poorly organized. With “View Source Chart” its much easier to view the code hararchie. Code page is divided into blocks that are highlighted in different colors. So you can see visually border tags and DOM structure in which it is easier to understand.
Windows resizer FireFox extension is great for testing your webpage for different screen sizes and screen resolution. It quickly and accurately resizes your browser so that you can check how your site looks in all standard sizes resolution. Supports all major screen resolutions from 640 × 480 to 1600 × 1200.
Nice utility for cleaning pages with superfluous elements, such as printing. Also useful for analyzing the structure of the page. Moving the cursor to the item page, you will see its id, label, class and assigned style. Using some keyboard shortcuts, such as R, you can remove an item from a page or V to see the source code.
Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. Very handy in editing your webpage while having your webpage live in Firefox.
Addon, as you understand, create macros for the same type of simple actions. For example – filling out forms, and remembering passwords, automatically upload and download images, files, or entire pages (with or without images), functional, performance, and regression testing of Web applications etc.
One of its kind and very useful firefox expansion, which is aimed at those who care about search engine optimization and promotion of a website. Seoquake provides various parameters SEO “on the fly” and saves them for future work.
This plugin is an extension of the standard Firefox functional to use a proxy configuration management. With it, you can switch the proxy on-the-fly, quickly enable and disable proxy, use proxy templates.
14. Page Diff
This extension allows web developers and designers to see HTML-code and it allows developers to diff between two pages, which can help in finding coding errors and differences. This could be a great alternative of winmerge and beyond compare.
Brilliantly simple solution to check the quality of typesetting Pixel perfect .This plugin is a complement to FireBug. It can easily be placed in your layout image and look at the sketch as it is in finished form. To do this, select the pictures and place them directly on the page. Pictures translucent, and can easily be drag and drop using mouse.
16. IE Tab
IE tab is a Firefox extension. We all know internet explorer sucks sometimes and there we never open Internet explorer. This extension is created for viewing sites that can be correctly displayed only in Internet Explorer, such as ActiveX controls or using the “expansion” of the HTML standard from Microsoft, the browser Mozilla Firefox, Flock, Mozilla Suite and SeaMonkey. To display pages using Internet Explorer instead of the engine Gecko.
CSSmate is very useful firefox plugin for editing CSS files while you can preview the webpage at the same time.
Codetech is a code editor written in XUL.Na. Currently there is no inbuild feature to highlight the code, but it has a perfect WYSIWYG editor. Window can be split into 2 parts, one to code and another to see real-time preview.
FTP client for Mozilla Firefox. FireFTP free, secure and cross-platform ftp client for Mozilla Firefox, which provides easy access to the servers ftp.
Platypus is an expansion of Firefox that allows users to change the web page within a browser and then save the changes.
22. CSS validator
Firefox plugin to validates your webpage using the W3C CSS Validator.
FireShot is an addition to the browser Mozilla Firefox, which allows user to create a screenshot of opened page. Unlike other extensions, this plugin provides the user with a variety of tools for editing and inserting text annotations and graphics. Such functionality will be especially useful for web designers, testers and editors.
Aardvark is a powerful and easy to use utility to select items and perform actions on them. Users can do cleaning of page for printing, User can create a pages easier to read. It also helps in analyzing the structure of the page.
25. Color Zilla
ColorZilla is incredibly simple and very useful plug-in for Firefox. If you never had the time to determine what colors are used on a Web page, ColorZilla is the perfect tool for this. I used to use code detector but now I can install this plugin to have browser inbuild utility which tells me the color code on fly.
26. Font Finder
With this extension you can select any text on the page, and then click the right mouse button and click on “Font Finder” to get all the information about the font. You can now use google to search and download the font.