metamags.com Technology Blog | Push The Limits of Technology

40+ Firefox Plugin for Designers and Developers

Posted on 13. Feb, 2010 by Editor in Resource

Mozilla Firefox is a very popular browser, especially among web designers and developers. These days, with such a crowded field, staying at the top of the browser heap takes a lot of work. One of the factors that make Firefox so well-liked is the huge library of great extensions that enhance your browsing experience. Among the massive list of add-ons, many are vital to web designers and developers. If used, it will make your workflow quicker and more productive.

1. CSSViewer 1.0.3 (Compatible with Firefox 3.0, Not with 3.6) (Rate: 5/5)

A simple CSS property viewer.

2. CSS validator 3.0.0 (Compatible with Firefox 3.6) (Rate: 3/5)

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. Opens the results in a new tab. Will only work on pages that have a CSS file associated. For example it will work with http://www.w3.org/ as the URL has a CSS file.

3. ColorZilla 2.0.2 (Compatible with Firefox 3.6) (Rate: 5/5)

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

4. Web Developer (Compatible with Firefox 3.6) (Rate: 5/5)

The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. For example, it has an option to inspect CSS styles of page elements that will tell you what CSS attributes they have, and which styles affect them.

5. Html Validator 0.8.6.1 (Compatible with Firefox 3.6) (Rate: 5/5)

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.

6. Greasemonkey 0.8.20091209.0 (Compatible with Firefox 3.6) (Rate: 5/5)

Allows you to customize the way a webpage displays using small bits of JavaScript. …

7. Firebug 1.5.0 (Compatible with Firefox 3.6) (Rate: 5/5)

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…

8. FoxyProxy 2.18.1 (Compatible with Firefox 3.7alpha) (Rate: 5/5)

FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.

9. Screengrab! 0.96.2 (Compatible with Firefox 3.6) (Rate: 5/5)

Screengrab! saves webpages as images…
It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.

10. YSlow 2.0.6 (Compatible with Firefox 3.6) (Rate: 4/5)

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

11. MeasureIt 0.3.92 (Compatible with Firefox 3.6) (Rate: 5/5)

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

12. IE Tab 1.5.20090525 (Compatible with Firefox 3.6) (Rate: 5/5)

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.

13. NoScript 1.9.9.45 (Compatible with Firefox 3.7alpha) (Rate: 5/5)

The best security you can get in a web browser!
Allow active content to run only from sites you trust, and protect yourself against XSS and Clickjacking attacks.

14. OperaView 0.7 (Compatible with Firefox 3.5) (Rate: 4/5)

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

15. Window Resizer 1.0 (Compatible with Firefox 3.5) (Rate: 4/5)

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.
Resize the current page via the Context menu, Tool menu or Toolbar button.

16. Fireshot 0.80 (Compatible with Firefox 3.7alpha) (Rate: 5/5)

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.

17. FireRainbow1.1 (Compatible with Firefox 3.7alpha) (Rate: 5/5)

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

18. Tamper Data 11.0.1 (Compatible with Firefox 3.6) (Rate: 5/5)

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

19. Firefinder for Firebug 1.0.1 (Compatible with Firefox 3.6) (Rate: 5/5)

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.

20. JSONView (Compatible with Firefox 3.7alpha) (Rate: 5/5)

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.

21. FireFTP1.0.7 (Compatible with Firefox 3.6) (Rate: 5/5)

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

22. HTTPFox (Compatible with Firefox 3.7alpha) (Rate: 5/5)

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.

23. Firecookie (Compatible with Firefox 3.7alpha) (Rate: 5/5)

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.

24. Dummy Lipsum 3.0 (Compatible with Firefox 3.6) (Rate: 5/5)

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.

25. Pixel Perfect 1.5.6 (Compatible with Firefox 3.6) (Rate: 5/5)

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.

26. FirePHP 0.4.3 (Compatible with Firefox 3.6) (Rate: 5/5)

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

27. DOM Inspector 2.0.4 (Compatible with Firefox 3.7alpha) (Rate: 5/5)

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 can be navigated using a two-paned window displaying a variety of different views on the document and all nodes within.

28. CodeBurner for Firebug 1.5 (Compatible with Firefox 3.6) (Rate: 5/5)

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

29. GridFox 1.2

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.

30. SeoQuake 2.5.9 (Compatible with Firefox 3.6) (Rate: 4/5)

Seoquake is a Mozilla Firefox SEO extension aimed primarily at helping web masters who deal with search engine optimization(SEO) and internet promotion of web sites. Seoquake allows to obtain and investigate many important SEO parameters of the internet.

31. Font Finder 0.5e (Compatible with Firefox 3.6) (Rate: 5/5)

With this add-on, you can highlight any text on a page to find out CSS styling information about that highlighted block of text.

32. Total Validator 6.2.0 (Compatible with Firefox 3.6) (Rate: 4/5)

This extension is an all-in-one validation tool that will check HTML, links, take screenshots and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.

33. Page Diff 1.5 (Compatible with Firefox 3.6) (Rate: 5/5)

Page Diff is an add-on that helps web developers and designers see HTML source code differences between web pages. This is helpful for finding code irregularities or differences that will enable you to debug rendering issues.

34.  Aardvark 3.0 (Compatible with Firefox 3.6) (Rate: 5/5)

Aardvark, aimed at front-end web developers, let’s you select web page elements and gives you several options for them, such as removing them from the web page (great for screen shots) or modifying their colors (helpful when printing web pages).

35. Codetech 0.4.3 (Compatible with Firefox 3.6) (Rate: 4/5)

Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.

36. Style Sheet Chooser II (Compatible with Firefox 3.0) (Rate: 2/5)

Style Sheet Chooser II allows you to choose author-provided alternate style sheets for a web site, and have those choices be persisted for all pages on the same site. Style Sheet Chooser II replaces Firefox’s built-in style sheet switcher – its functionality is available via the [View]->[Page Style] menu item, one-click stylesheet rotating Toolbar icon and Statusbar icon. Icons can be switched on/off via Extension Preferences.

37. Console² (Compatible with Firefox 3.7alpha) (Rate: 5/5)

Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. From v0.5 includes the Console Filter extension previously available separately from the Console² website.

38. IE NetRenderer 0.9.5 (Compatible with Firefox 3.7alpha) (Rate: 4/5)

If you are like me and design your sites for Firefox then this is a great tool for you. IE NetRenderer will create you an image of how the website looks in IE 5.5, 6, 7 and Beta 8 so you can get an idea of whether or not it looks right in IE.

39. Image Zoom (Compatible with Firefox 3.6) (Rate: 5/5)

40. CS Lite 0.4.4 (Compatible with Firefox 3.6) (Rate: 5/5)

Adds zoom and rotation functionality for images.

Tags: addon, design, devolopers, extension, firefox, plugin