26 Essential Firefox Add-ons for Web Designers
It’s no secret that web designers and developers love Firefox! Firefox provides an endless amount of functionality that you simply won’t find in any other modern Internet browser.
One of the greatest aspects of Firefox is the ability to install add-ons to do just about anything and everything a browser can possibily do. As a web developer this functionality is extremely useful to us.
Firefox has some cool add-ons which make the job of website designers much easier. There are many useful add-ons for Firefox out there and we use several pretty much every day for work.
Since there are so many different add-ons available to download, it can be a little overwhelming to pick out which ones you should be using. We compile a list of the 26 Essential Firefox Add-ons (along with brief descriptions) that every web designer should know about. Be sure and let us know if we have missed anything!
You may be interested in the following related articles as well.
- 30 Excellent CSS Based Navigation and Buttons Tutorial
- 30 Brilliant Web-based Photo Editors
- All New PHP, CSS & HTML Help Sheets
- 5 Free Music Players for Your Website
You are always welcome to share your thoughts even if you have more reference links related to More Firefox Add-ons other then this featured list that our readers may like.
Essential Firefox Add-ons
The Web Developer Extension is a extension for the Firefox browser and it’s a great tool for web designers. It has a variety off essential tools that allow you to code quality websites and troubleshoot problems easily. It’s a powerful all in one plugin. Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. The Web Developer tool saves you time when playing around with CSS.
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 gives you full control over the CSS, HTML and JavaScript of any page that you choose. Inspect and edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScript. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.
Codetech is another wonderful firefox extension which allows you to edit your documents right next to your web pages as you surf. This web page editing tool has the feel of Dreamweaver in a Firefox extension. For a web developer or designer, which offtenly deals with HTML source code, Codetch is a lite version of a application like Adobe Dreamweaver. It has a similar layout, yet less features, but it helps the user to complete its source based tasks.
Author description says it all. It’s the closest you can get to a professional web editing interface in a browser. Install it as an extension today and have a full featured editor right beside your web pages as you surf!
If you don’t know what Grease Monkey is, it is a Firefox plugin that allows you to run your own java script on any page you are viewing. Now why would you want to do that? Well, basically it allows you to fix or enhance any web page out there to meet your requirements and not those that the designer wants to force on you. In order to help you write the java script you might need, you can use another plugin for FireFox, Firebug.
Greasemonkey is an addon for the Firefox browser that allows you to run scripts that alter the pages that are displayed to you for certain websites. Every time after the page has been loaded greasemonkey will apply the active script(s) to it. The scripts can be used to remove or add elements to the page because they can change the source code (HTML). This allows you to modify the functionality and design of any website that is displayed in your browser without control over the actual files on the web server.
This seems pretty dangerous behavior but all greasemonkey scripts are open source and its very easy to see on which sites/pages the script operates.
Greasemonkey is a unique extension in that it lets you install these things called user scripts. User scripts are much smaller than extensions, and are often targeted to much more specific tasks than extensions. There is a web site called UserScripts.org that is devoted to these small tiny hacks people have created to make the web work more like the way they want it to.
It can be complicated to create your own user scripts (it requires understanding the Javascript programming language), but it is dead simple to install and use scripts other people have created. And let me tell you that a *lot* of people have created scripts. There are over 7500 user scripts on UserScripts.org. If something on a web page has annoyed you, there is undoubtedly a user script that fixes it.
Greasemonkey is a Firefox extension that allows you to customize the way webpages look and function. Allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org. You can write your own scripts, too. Mark Pilgrim’s definitive Greasemonkey guide, diveintogreasemonkey.org will show you how.
An other one of my favorite Firefox extensions is ColorZilla indeed. ColorZilla add-on features an online eyedropper, which makes it quite simple to get the exact value of a specific color. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. In addition to color picker, ColorZilla offers a DOM color analyzer which allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color. ColorZilla also features a online palette viewer that allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. With this beautiful extension you can Zoom the page you are viewing and measure distances between any two points on the page.s
FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.
FireShot gives you several options for handling your screen captures. Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server. As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.
As someone who creates designs for the Internet, one of the most chellanging job is to create design elements aligned. In that case MeasureIt comes in handy and allows you to overlay a ruler on a browser page so you can verify width, height and alignment of page elements.
CSS Validator is a Firefox extension which 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. When using the HTML Validator, you can choose to validate directly in the browser (where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.
One of the most frustrating issues that a web designer undoubtedly encounter when coding grid-based layouts. How can a designer be sure that the grid is maintained from the original mockup to the final coded version? When I coded my first grid-based layout, I found myself regularly taking screenshots of the site and comparing them with my original grid in Photoshop. There had to be an easier way.
GridFox is a great extension that will overlay a grid on a selected 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.
Whenever I create a web template or want to add an item to my portfolio I need to take a screenshot of the page and in most cases this is just a case of pressing Print Screen, however when you want to take a screenshot of the whole page (below the fold) this can get very tricky. There are tools like SnagIt that do this for you however these cost money. Introducing Screengrab, an addon for Firefox that does this for free. Screengrab can save or copy to the clipboard; what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images.
OperaView is an extension for Mozilla, Mozilla Firefox and Flock which is very similar (and actually based on) IE View.
Even if you using Mozilla browser all the time, sometimes it is need for view the page, you are looking at, in Opera browser (especially if you are a web developer). OperaView extension makes that process easier by adding item View This Page in Opera to the page context menu and a button to the toolbar and item Open Link Target in Opera to the link context menu. So if you would like to quick view page in Opera, just right click somewhere on the page and choose new menu item.
The web developers nightmare – Validating. Offline Page Validator is a simple tool that will send your page to the W3C validator by simply clicking an option on the right click menu, works both online and offline.
The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you. The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window. Browser Window Resizer add-on resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolution sizes.
In a world where users still use IE, the IE View extension comes in real handy. I am aware that lots of likewise extensions exist, though I think that this was the first one in its kind. Any web designer will tell you that one of the biggest parts of web design is getting your work to function properly in Internet Explorer. Well IE Tab lets you do that without even leaving Firefox. IE Tab will open up our file exactly like it would look in the version of IE you have installed in a convenient 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.
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.
With this extension you can view CSS properties of related page elements. Very handy, when You got large CSS file with styles overlapping each other, to analyze why something is not displayed in the way You wanted.
Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, or OS X based on the current page.
FireFTP is a free, secure, browser based FTP client that allows you to easily access your server via Firefox instead of having to launch a separate program.
You know how in IE when someones screwed up their javascript it lets you know theres an error at the bottom of the screen? Then you know that other than letting you know, it isn’t good for much else. Console² set out to help you debug your javascript, css, and more from the comfort of Firefox. Console² replaces the JavaScript Console with what could be the next generation Error Console. Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements.
CS Lite is definitely one of the best Firefox Cookie Managers. The most effective way to manage cookies on your system is in my opinion to block them globally and enable them on a per-site basis. Blocking them globally ensures that no cookies will be set unless you explicitly allow them to be set. A good rule of thumb is to visit a website and if you do not recognize any problems you can keep the cookies blocked.
This extension will allow you to easily control cookie permissions. The blocklist can be configured to automatically update or can be updated manually.
I also would like to point out two interesting features of the extension. The first is a blocklist that can be downloaded from the Internet. This blocklist contains more than 200 companies that set cookies to track users. This blocklist is accessible in a table that also contains the allowed domains. Downloading the blocklist makes only sense if you do not disallow cookies globally.
Another handy development extension (and timesaver) is JS View which nests itself next to the quick search bar (although at work it sits in the status bar – maybe the versions differ, didn’t check) and when clicking it, it gives you a list of the currently linked stylesheets and javascript files. When then clicking any of the items you immediately are taken to the view source window with the selected file in the source. Very handy, very timesaving imo!
All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code. Previously if you wanted to view the source code of an external javascript/stylesheet you would have to manually look through the source code to find the url and then type that into your browser.rnrnWell now there’s a much easier way. You can use the JSView extension to solve the problem. You can access it from the context menu, from the toolbar, from the view menu, or from the status bar. If the website you are viewing contains any external js/css files, an icon will appear that says “SS”, “JS”, or both. Each individual file can then be viewed by clicking on the filename. The file will be opened in a new window. You can also choose to open all external files by clicking on “View All”.rnrnWith the latest version you can now view the embedded css and js as well (FF2 and SM2 only). Just open the “Page Info” window from the context menu or tools menu. There will be 3 new tabs in that window. One for scripts, one for stylesheets, and one for frames. You can open them by double clicking or by using the context menu.rnrnYou can also right click on the ‘view page source’ menu item and open the url of the current page with jsview. This allows you to open the source code of any web page in a new tab or in an external editor.
I find it great for inherited websites where I need to troubleshoot problems on live servers, as I can have all the debug/variable dump/etc crap dump to the FirePHP console so it doesn’t show up on the website while I’m trying to track down a problem and the budget is not there to make a dev copy of the system[they need an in and out fix, 4 hours tops]
FirePHP seems like a very cool project, allowing PHP developers to debug applications without having to disrupt the normal process of a script. It works by sending the debug content to the browser in special HTTP headers, and the Firefox extension add-on to Firebug will parse those and display them in a special panel within Firebug.
It’s so useful I’m going to install this right now. I can’t believe nobody else thought about doing this before!
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. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page.
You must have Firebug installed and the “Net” panel enabled to use this extension.
FirePHP is perfectly suited for Ajax Development and how to implement a selective logging system allowing the developer to switch on and off specific logging items on the fly. A complete working demo you can take and make your own is also included.
Simply highlight a single element (e.g. a paragraph or a strong tag ), right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears. So simple and useful!
I really like this add-on since you can find out very fast what font style is been used on a certain text. A big time save if you have this tool. But you also can use tools like firebug to find out what the font is.
Font Finder is a handy little tool that shows you all the font properties of the selected text. It can show details concerning the selected text colour, font-family, spacing and decoration values.
Just highlight and right click to see all of the styling information you could require including font-size, font-family, color (in both hex and RGB), line-height, letter-spacing, and much much more..
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.
Adds buttons, tools menu and contextual menu entries to get a screenshot of the current page with IE NetRenderer.
Keyboard shortcuts are also available: Ctrl+Shift+F5/F6/F7/F8 to render the page in IE5.5/6/7/8 Beta 2 (Cmd+Shift+F* on Mac).
Really useful for webmasters which are not using Windows!
Easy to use extension that works with Firefox and Thunderbird. If you have ever had an image that was too large to fit on your screen or too small to see the finer detail in your browser or email, then image zoom can help. Image zoom gives you complete control of the size of most images displayed in mozilla based software. Both individual images or whole pages of images can be zoomed.
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.
Firefox does not come with a built-in JavaScript debugger. Nevertheless, Firefox users can download Venkman JavaScript debugger version 0.9.87.4 as an extension below.
Other Useful Add-ons!
- Link Checker
- Load Time Analyzer
- Clipmarks
- Pagediff
- RankQuest
- SEO for Firefox
- YSlow
- Dummy Ipsum
- Live HTTP Headers
- Image Download
- Foxmarks Bookmark Synchronizer
- NoScript
- View Dependencies
- Yellowpipe Lynx Viewer
Find something Missing?
Is your favorite Add-on not on the list? Share it with us in the comments, along with your experience and why you like it over other Add-on.
Author : DKumar M.Hello, iShift was accidentally founded by a group of professionals. One of them is me, DKumar M., an Asian freelancer who is still single. My work covers advertising, consultation, programming and web design areas.90 Articles posted by DKumar M.. |
 |
 |
Enjoy this Post? Subscribe to InstantShift. RSS Feed
 Email Feed
|
Submit News
Leave a Comment Subscribe to RSS Feed Subscribe by Email
Hum, was already using some of these, but its nice to know “all” of the options.
Great Post.
Great Post. Thanks
I think you hit it right on the nose, those are all definitely the best firefox extensions for web designers/developers. I don’t know that I agree with the order though. I use aardvark, colorzilla, web developer, firebug, measureit and html validator the most. In that order I’m sure. I haven’t used the window resizer plugin because web developer has that function easily accessible.
Great article.
Well, actually a lot of the functionality (DOM inspector, load times, dimensions, HTML id’s and classes inspector, some other I don´t remember and don’t want to scroll up) of the stated extensions over there is included in Firebug…
Firebug has a special place in my heart…
As a note, IE Tab will not work in OSX. You will still need parallels or bootcamp to test in IE (ugh…).
Another useful object, although not a firefox add-on, for those with OSX is PhotoDrop. http://www.dropping.at/ it will allow you to make quick screenshots (with measurements) and copy them right to the clipboard.
Great Post. Bookmarked.
Great post! I didn’t even know these where available. I love FireFox!
Nice set of plugins… I might going to use one or two.
Is this list arranged in some type of order or just random ?? Very informative post about Add-ons ever seen.
Thanks Guys.
Thanks for the post Dkumar…As a designer I’m using most of them daily but never knew about colorzilla and GridFox.
Dugg, Stumbled And Aslo bookmarked at del.icio.us…. Thanks for the resource guys.
Am i the only one who missing something…Where is FoxyTunes, InspectorWidget, TinyUrl Creator ??
Agree with PT, It’s always good to know all the available options.
I just love Firebug for my multiple needs. Thanks for putting us all together such a nice list of Addons.
I Just shifted to Chrome and love working with it… but still i use Firefox for designing purpose.
Thanks DKumar for this informative post and resource.
i Kinda agree with Bruce as many of above plugins integrated with firebug. Not very Sure about others. I usually prefer less numbers of plugins as it makes my browser very slow and less responsive.
Although i’m using firebug, Web Developer for my designing related stuff. Great reading and Nice writing style. I like the way you represent them.
Thanks for sharing this post wit us.
I am using IE tab and Firebug among the list. Very useful post Thank you
Well put list ,firebug and the web developer tool bar are some of my favourites.
Agreed, good list. But aren’t some of the plugins kind of do the same? For example, why use separate plugin validator when Web Developer tools do all of that? You may have just missed it, but it’s under ‘Tools’ option.
Really a brilliant list. I like the IE render extension. Most of them are under mmy use.
Thanks for this awesome post. Shall definitely link to it, and also post my review on a few of them.
Cheers!
Great list! I use a lot of these on my own jobs. Specifically Firebug (the best), ColorZilla and IETab.
I do suggest the YSlow plugin for Firebug (reports on loading speeds) and the PixelPerfect plugin for Firebug (allows you to overlay an image on a page with a set transparency, great for working with CSS and templates).
Thank you SO MUCH for IE Net Renderer…I thought I was up a creek developing on Ubuntu for IE6 and 7 support.
Excellent post. I am actually going to grab a few of those essentials. I didnt even know about a couple of them. Thank you so much for this. These will definitely help.
There have been a steady strem of great articles on here. Kudos for that.
I used to wonder why people made such a big deal over Firefox. Recently I learned that a major reason is because of how adaptable it is for purposes such as this. I used to consider a web browser as just a disposable tool, but the potential to do so much more than view webpages is there.
Great list, thanks! There’s a few in there that I had been searching for a while and now I have them. Thanks!
Great list of web design extensions for Firefox! Great for web developers and designers.
You really only need two of these to get everything done: firebug and webdeveloper. Most of the other extensions listed here just duplicate their functionality. ColorZilla looks pretty cool, but like the screen capture extensions, your os can do it for you.
These extensions are in fact dispensable. They’re not ALL necessary. For example, you can browse the DOM, edit HTML/CSS on-the-fly in Firebug, so you don’t need a ton of the other ones. Honestly, as a web developer myself, you only need Web Dev toolbar and Firebug. Those two do just about as much as you need.
Great list, thanks!
Firefox is never been hotter! with all the addons we can surf the internet so smoothly. I love using firefox and not planning to switch into other programs any time soon.
Yeah the web developer toolbar is the business.
The only problem is that, lately, Gmail doesn’t work fine with it. I’m told the culprit is the web development toolbar.
All of these are awesome sounding. I may just put a few of them to use tonight.
Nice List. I guess you could use the Web Developer Extenson to replace Browser Window Resizer though.
Thanks for sharing
Gopal
You could also check out LinkSidebar, which allows you to test links after filtering out ads:
https://addons.mozilla.org/en-US/firefox/addon/8360
thanks for the great info, but i am not to thrilled to design for firefox…there are a lot of things we cant do with our sites.
It is quite interesting… i’v got more than 15 of the pluggins listed above.
Your list is quite good and a must have for any web developers.
Firebug comes with a Javascript debugger.
I use Firebug and YSlow. YSlow has taught me how to save lives. Because of YSlow, I’ve taken 66 image http requests at a total of 110kb and turned it into 1 image http request at 40kb without losing any image quality within the website’s interface. How did I do it? YSlow taught me how to take all 66 of those images and turn them into one sprite image. Then I’d use span tags to load the sprite as a background-image with a background-position offset for each element within the sprite. I even have mouse-over images, all loaded from within the sprite. It’s pure genius. The reason why I do this is because each http request takes bandwidth, server-side memory, etc, so it’s very important to cut down on as many http requests as possible.
Web developer and Firebug are required for any web designer, other are also equally important.
Just cant get enough of your articles, keep them coming, stumbled!!
I’ve been using an old apple tool for screen grabs but not any more. I didn’t know there were so many great tools. I use a few of them but will be using a lot more soon! Thanks!
Measureit is dam mm good…. thanks so so so much… i’m experimenting with different themes to convert them to Blogger platform and this utility is definitely gonna help a lot.
Thanks for the list. I am going to try a couple of those that catch my interest. So far i’ve been using firebug for FF and firebug lite for IE6, it saved me endless hours while designing/developing.
Cheers,
Voya
Very nice and complete resource for developers.
WOW…… that’s an amazing list….. thanks a ton
I use Greasemonkey with Google Reader so that I can preview and comment on blog posts right there. I love it! (Thanks to Miss Britt for her blog post about Greasemonkey!)
I use MeasureIt on a near-daily basis. It definitely comes in handy when you want to align things on a page during design, or even when you forget what size your new image needs to be so that it fits in with the other images on a given page.
I am definitely going to have to get my hands on some of these, such as CSS Validator, the Browser Window Resizer (ingenius!), FireFTP (this is going to make my life SO much easier!), and FirePHP.
Thanks bunches for this article; it’s a life saver! (:
I am using some of them. The screengrab plugin is a useful news for me!. Thanks!
Good article.
Thus is great article,
I have learned few things today.
I love the FireFTP, this plugin makes my life a lot easier
Thank you for taking your time writing this post for the benefits of all developers.
Amit
more:
Clear Cache
https://addons.mozilla.org/pt-BR/firefox/addon/10822
F9 shortcut is a great idea. So easy and fast.
Great Resources……………and very helpful for designers as well as developers………… Thanks you so much for providing these information……………………………………
Another useful tool for exploring a page’s source is “View Source Chart” https://addons.mozilla.org/en-US/firefox/addon/655.
that is a collections which we can use in our designing and development work, these of all really helping add-ons, some of these i’m using right now, and some of other will try now.
thanks admin
Vidiya
When a guest registers with me, there is a $50 minimum, I will send my client a confirmation that $50 has been applied to their account from Mr. ,
This backward stepping breakdown process is extremely important and continues until the designer comes to a set of very basic skills. ,
hi awesome collections, i would like to add more firefox add-ons related to the designers
37 Top Firefox Add-ons For Web Designers
Thanks for this great article!
If you want more Firefox add-ons, I wrote a post listing 83 Awesome Firefox Add-ons that every Web Designer must have! http://bit.ly/2s7GQS
Cheers
Hi Dkumar,
Thank you for a fantastic list of Firefox add-ons. I have written a blog post entitled ‘Firefox Add-ons I Can’t Live Without’ (http://blog.ianroke.co.uk/2009/12/firefox-addons-cant-live-without/) which lists pretty much what you have here but I have compiled a list of the ones I would like to try such as MeasureIt, GridFox, Browser Window Resizer, IE Tab and FirePHP.
After I have installed them and had a play about I will be editing my blog post to add them in I’m sure and when I do I will credit you and this post.
Cheers, Ian.
Your NameJanuary 19, 2010
1. Browser is javascript enabled and accepting cookies.
2. Clear browser cache and try again.