Advertisement

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 compare 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.
firebug

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.
window-resizer

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).
total-validator

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.
fireshot

5. FireRainbow

FireRainbow is a Javascript syntax highlighting for Firebug 1.3+. It requires Firebug 1.3 or higher.
firerainbow

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.
html-validator

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.
library-detector

8. Tamper Data

Use tamperdata to view and modify HTTP/HTTPS headers and post parameters. Trace and time http response/requests.
tamper-data

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.
firefinder-for-firefox

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.
jsonview

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.
javascript-deobfuscator

12. FireFTP

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.
fireftp

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.
httpfox

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.
aardvark

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.
firecookie

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.
dummy-lipsum

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.
pixel-perfect

18. EditCSS

Stylesheet modifier in the Sidebar.
editcss

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.
firediff

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.
firephp

21. OperaView

Open pages in Opera from Firefox and Mozilla context menus. Very useful for web developers.
operaview

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.
dom-inspector

23. YSlow

YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
yslow

24. CodeBurner for Firebug

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.
codeburner

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.
ie-tab

26. CSS Viewer

A simple CSS property viewer.
css-viewer

27. ColorZilla

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
colorzilla

28. MeasureIT

Draw out a ruler to get the pixel width and height of any elements on a webpage.
measureit

29. Web Developer

Web Developer adds a menu and a toolbar with various web developer tools.
web-developer

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.
viewsourcewith

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.
gridfox

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.
screengrab

33. Pencil

Pencil is a free and open source tool for making diagrams and GUI prototyping that everyone can use.
pencil

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.
palette-grabber

35. Dust-Me Selectors

Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors.
dust-me-selectors