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 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
01. Web Developer
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.
02. 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 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.
03. Codetech
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!
04. Greasemonkey
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.
05. Colorzilla
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
06. FireShot
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.
07. MeasureIt
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.
08. CSS Validator/HTML Validator
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.
09. GridFox
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.
10. ScreenGrab!
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.
11. OperaView
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.
12. W3C Offline Page validator
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.
13. Browser Window Resizer
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.
14. IE Tab
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.
15. Style Sheet Chooser II
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.
16. CSSViewer
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.
17. Palette Grabber
Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, or OS X based on the current page.
18. FireFTP
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.
19. Console²
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.
20. CS Lite
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.
21. JS View
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.
22. FirePHP
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.
23. Font Finder
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..
24. IE NetRenderer
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!
25. Image Zoom
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.
26. JavaScript Debugger
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.