Firefox is a very popular browser, especially among web designers. There are more than 70% of WDB’s readers are using Firefox. There are few reasons which make Firefox so popular compared to others and obviously, its plugins had contributed a lot for that.
Today, we are going to look into 35 useful Firefox extensions for both web designers and web developers. You are not required to install all extensions, as this will cause your Firefox slow and lag. Without talking much, let’s look into these extensions.
1. Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
2. Window Resizer
The Browser Window Resizer is useful for testing different screen sizes. 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.
3. Total Validator
Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs).
4. Fireshot
FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part). Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations.
5. FireRainbow
FireRainbow is a Javascript syntax highlighting for Firebug 1.3+. It requires Firebug 1.3 or higher.
6. 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.
7. Library Detector
Detects what javascript libraries are being used on the current page and displays the result as icons with detailed tooltips in the statusbar.
8. Tamper Data
Use tamperdata to view and modify HTTP/HTTPS headers and post parameters. Trace and time http response/requests.
9. Firefinder for Firebug
Firefinder is an add-on to Firebug, to help find HTML elements matching chosen CSS selector(s) or XPath expression. Type in desired filter and view the results.
10. JSONView
With the JSONView extension, JSON documents are shown in the browser similar to how XML documents are shown. The document is formatted, highlighted, and arrays and objects can be collapsed.
11. JavaScript Deobfuscator
This add-on will show you what JavaScript gets to run on a web page, even if it is obfuscated and generated on the fly.
12. FireFTP
FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.
13. HTTPFox
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. It aims to bring the functionality known from tools like HttpWatch or IEInspector to the Firefox browser.
14. Aardvark
Powerful and user-friendly selector utility for selecting elements and doing various actions on them. It can be used for cleaning up a page prior to printing it (by removing and isolating elements), and for web development.
15. Firecookie
Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser. Firebug has to be installed in order to use this extension.
16. Dummy Lipsum
Generate “Lorem Ipsum” dummy text (from http://www.lipsum.com). Minimum text length: 5 words. Context menu option on form inputs (“Insert Dummy Lipsum”). This option fills automatically the selected field.
17. Pixel Perfect
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.
18. EditCSS
Stylesheet modifier in the Sidebar.
19. Firediff
Firediff implements a change monitor that records all of the changes made by firebug and the application itself to CSS and the DOM.
20. FirePHP
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 or XML responses are required.
21. OperaView
Open pages in Opera from Firefox and Mozilla context menus. Very useful for web developers.
22. 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. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.
23. YSlow
YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
24. CodeBurner for Firebug
CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.
25. 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.
26. CSS Viewer
A simple CSS property viewer.
27. ColorZilla
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
28. MeasureIT
Draw out a ruler to get the pixel width and height of any elements on a webpage.
29. Web Developer
Web Developer adds a menu and a toolbar with various web developer tools.
30. ViewSourceWith
The main goal consists to view page source with external applications but you can also open page source as DOM document, open CSS and JS files, open images with your image viewer and a lot of other features.
31. GridFox
GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.
32. Screengrab
It will capture what you can see in the window, the entire page, just a selection, a particular frame. Basically it saves web pages as images – either to a file, or to the clipboard.
33. Pencil
Pencil is a free and open source tool for making diagrams and GUI prototyping that everyone can use.
34. Palette Grabber
Palette Grabber creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET, or OS X based on the current page.
35. Dust-Me Selectors
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors.
