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.
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.
thanks some of them are unknown for me well really thanks for sharing, i found a good one from here is palette grabber.
I’m glad this went beyond the regular 10 list of things.
But you really gave too much fanfare for firebug, and so little to webdeveloper which does so much more and actually can fill in for 3/4th of this list.
Webdev toolbar has lots of things that you need added addons for in this list like measuring, screensize resizing, validation etc.
I totally agree about the web developer toolbar. Most things on this list are covered with just that extension.
However, I didn’t realize there were so many additions to Firebug. There were a few that I’m going to check out. Thanks.
Hey great list here.
Good job.
Awesome stuff for all designers
beautiful post, using already several most popular plugins
thanks for the efforts.
this is the most complete and comprehensive list on web for web people
Wow, most impressive collection!
R
http://www.privacy-web.tk
Great list! thank you very much
Today, Just know your blog from digg .
All of your posts are absolutely rock!
Keep up perfect work.
I’m your fan.
bookmarked!
The author did a sloppy research.
This list includes many add-ons that provide functionality that is already included in other add-ons. The author just tried to make his list 35 entries long, the magical “I sell good” number here.
What you really need:
* Firebug (No. 1)
* Google’s Page Speed (unlisted)
* Web Developer (No. 29)
* FireFTP (No. 12)
“Firebug” lets you edit HTML and CSS code, thus makes No. 18 and 26 unnecessary.
“Web Developer” lets you resize windows (thus makes No. 2 unnecessary) and lets you validate your pages (makes No. 3 and 6 unnecessary).
If I spent more time here, I would surely find more duplicates.
And how can you miss Google’s “Page Speed”? It is immensely helpful. Not including it here speaks volumes of the author’s knowledge.
This article is really bad. Like I-enumerate-everything-I-find-because-I-have-no-clue-when-it-comes-to-web-development.
I’m actually, before reading this articles, already use some of plug-ins listed here. However, I still think it is a good alternative to compare with another plug-ins.
For me Firebug, Webdev, FireFTP is not cover all developer need.
MeasureIT, ColorZilla are also important as it reduces my time capture screen to photoshop in order to find out color code and dimension of elements.
What’s new for me is Fireshot. I would introduce this plug-in to my client who doesn’t have photoshop skill. I think they can transfer the requirement easily online using this tool.
Anyway, thanks for your suggestion of GG page speed. I’m gonna try it.
Hater!
Areyoukiddingme: “Oh Look at me, Oh I can correct people, oh Im so good”
lols
I saw some duplicates too, but i don’t need to hate.
Just getting started, this is fantastic for me. Thankyou
Excellent list of tools!
Props for Pencil. We use it so that our users and consultants can do their web app designs before passing them over to us. It’s awesome.
the funny thing is that web dev toolbar has functionality of many other extensions you’ve listed- validation css etc
Great list!
Thank you for putting together this list.
you forgot Font Finder, Fire Shot, Delicious, use these 3 daily as a web developer
the letter spacing on the logo of your website needs some work
You have really done a hard work, i really appriciate it. Thanks for sharing.
Great List , the one I couldn’t do without it Firebug
One of the best and most comprehensive Firefox plugins list I’ve seen in a while. Great job!
Awesome add-on list!
Thank you for the post.
nice Firefox add-ons already using some of them but overall very good thanks for sharing………
A great list. A used the html validator and fireshot when I used Windows, they are great, but unfortunately you cant get them on Linux. Screengrab and total validator are a good second best.
Hi, it’s great and very useful.
good lots of useful add ons i am using some of them thanks
Excellent post, there were some new ones on this list for me that I added to my browser. STUMBLED!
i use some of them but i never know that i left some good stuff.
thx for sharing
This is one of the better lists I have seen, thanx. ViewSourceWith I didn’t know about for example.
Can I suggest colorzilla:
http://www.colorzilla.com/firefox/
Hi Nabil,
I had ColorZilla in my post, item #27.
oops… sorry
Good stuff. I had some of these already installed. Now my FF will explode!
YEAHHH!!!! this is what I was looking for.
Great post, I’ve just decided to not use FireFox, because I use Crhome, but with this plugins I’m reconsidering my desition.
Thanks!
these are great, immensely great
Very great, long and complete list!!!! Wonderfull!
Thank you for sharing your Valuable information.
Great List
gr8888888888
Excellent work friend. Some of them are tools of my dream. I can’t wait to try them out.
Thanks for sharing some great plugins. I still have to learn it before using them.
As a web developer I would also add some crucial tools, that I cannot live without.
1. SeoQuake
2. Seo4Firefox
and
3. Diigo tool bar ( awesome tool for taking notes on any website, it’s like having post-it notes that always go with you and you can place then on any page of any website).
Fantastic! I’ve used a few of these plugins but didn’t know about Fireshot–and it’s awesome! Thanks for sharing.
Great list, thanks. I’d definitely put Web Developer toolbar in the top 3.
Most of the plugins are actually for firefox. This list has many plugins which do the same job.
And you really gave too much to firebug and so less to web developer.
Most of the things on here can be done by extensive tools in web developer.
thanks for the post !
This is a great article. As a chronic IE user, I have toyed a lot with firefox, but this really provides an arsenal. One thing though about FF that has always bothered me is that when I download files, there is no option to “open” them like I get in IE…I always have to browse to my downloads folder.
this, very thank you..
Your site full professional and very beautiful…
Great article thanks for sharing
WebDeveloper Toolbar already does window resizing, so there’s no need for WindowResizer.
Anyway, thanks for compiling the list
Not directly for developer but very useful in finding files —> https://addons.mozilla.org/de/firefox/addon/10598/
Very nice site.
I really appreciate you providing this list of firefox tools and plugins as I have only in the last 3 months switched to using firefox instead of I.E and love it.
Knowing about these plugins has made me
like firefox even more. Thanks.
I am following your blog, for a long time. Because, your blog is including, useful and necessary information. Your blog is in my browser’ s bookmarks.
Good jobs.
thanks a lot for the list. Going to try out some of the of them like pencil, didn;t had idea about it.
great list of resources, we utilize nearly some form of all of these here.
Great plugins, my fav are firebug, the seo toolbar and also I use this link copy plugin a ton!