FireFox is an extremely popular browser and probably my personal favorite. Lately it starts to shine less in front of Chrome, which I find much, much faster, but it still has its share of awesomeness. A part of it is, of course, the fact that it is NOT Internet Explorer, but let’s not get into that…
One of the best features of FireFox its openness. The browser allows third party developers to create plugins, called add-ons in the FireFox world, which can then later be deployed by users in their own browser, enabled and disabled with ease and removed when no longer needed. This is a very powerful features which opened the doors to developers’ creativity and allowed them to share this creativity with the users of the browser.
There are lots of add-ons out there. TechCrunch reported about 11,623 of them. That’s a large number. Picking a few favorite ones could be rather tricky. Obviously I didn’t try all of them, so I will limit myself in presenting those add-ons that I happened to find, use and grown to love over time. Feel free to try them out, after all they are all free. I hope this little review will be helpful to you and I am happy to hear your suggestions about other add-ons that you know and use.
FireBug is by far my absolute favorite FireFox Add-Ons of all times. I almost cannot remember how life was before FireBug. So, what is FireBug? It’s a complete development environment that works directly integrated into the FireFox interface. Briefly it looks like this:
YSlow is a add-on created by Yahoo which integrates directly into the FireBug console. Talk about an add-on being added on… YSlow is designed to analyze your pages and give you feedback about their performance. The tool looks over a large number of issues, some more important than others. The rules used by the tool are some rules defined by Yahoo and they may not necessarily apply to smaller websites. However, most of them are valid and are good general guidelines. However, it does allow you to select a certain predefined set of rules and then tweak it yourself. You can read the full “Best Practices for Speeding Up Your Website“. In addition, the tool has various statistics and graphs that can help you identify the culprit that slows down your site. I find this tool really useful especially since it’s so easy to run. I never put a site live until I run it thoroughly through the YSlow engine.
3. Web Developer
4. Autofill Forms
Autofill Forms is a great tool for repetitive actions. It was created by Sebastian Tschan and I think it’s one of the best auto-form-filler I’ve used. It allows the creation of multiple profiles and each profile can have its own set of name/value pairs. By default you have a certain number of predefined pairs, like Username, FirstName, and so on. But then you can add your own, without limit. Once you set up your profiles, when you are browsing a page that requires fields to be filled in, like a registration form, you simply right click and select the proper field from the context menu, and it is automatically filled in for you. The tool allows automation too, also augmented by a certain regex logic. Basically it is able to automatically look for fields and fill them in based on a certain pattern. For example if the field name contains the word “username”, just fill in the username automatically. It’s an excellent addition to your arsenal if you need to do a lot of input and registrations. I use it a lot when I have to submit sites to search engines and directories. Usually I have 5-6 fields that I need to fill (name, website, description, keywords, email, etc…) Without this tool, it would take me forever to finish. Using this tool I can literally submit my site to hundreds of sites in one week.
AddThis is more known to people from their widgets embedded in various sites and blogs. But they did create a FireFox add-on that makes it easy to share sites directly from the browser, regardless if the site provides such a sharing capability or not. I find it really useful especially for my own need, when I have to syndicalize my own blog posts or sites. With this add on, you can do all the sharing directly from your browser’s toolbar and it’s very quick and simple.
6. Live HTTP Headers
Live HTTP Headers is an advanced add-on. I say advanced because you need to know a little bit more about network communications and how the requests and responses are made between a server and a client. This add-on opens a window and actively monitors the traffic between the browser (the client) and the server. This allows you to see exactly what gets sent from your browser and what comes back. It has many options allowing you to filter what you see. You can remove the requests for CSS, images and so on. You can filter URLs and file types using regex too, which is quite useful if you want to target a specific file type. Using this tool you can debug issues with your cookies or with state persistence as well as various other issues like protocol incompatibility and so on. In the future, I’d like to see here some kind of “hook” ability that would allow you to replace a certain value, add or remove headers, to allow a little more flexibility and more testing capabilities.
7. Link Evaluator
There are quite a few link checkers out there, but I particularly like Link Evaluatorbecause it seems to me as it works faster than most evaluators out there. It was created by Filip Babalievsky and because of its features it is marketed as an advanced link checker. It runs easily by launching from the menu, and once it is started it immediately start to check the links andhighlight them with representative colors (green for good, red for bad and so on). But the tool also comes with a console where you can actually see the results and where you can tweak what the tool does. You can restrict URLs from being checked and you can also select what types of errors will the tool intercept. You can also create profiles and save them for future use. It’s a good tool to use, especially when you have a large site with many links and you want them all checked very fast.
HtmlValidator is an essential tool for any serious web developer. Html validation in general is extremely important and this tool by Marc Gueury does a good job. Basically, when you fire it up it runs a certain rule set against the current page and opens up a new window with your source and with all errors and suggestions presented at the bottom. You can double-click on the errors to jump into the page source and see exactly what the problem is and fix it. It has 3 different algorithms: SGML Parser, Html Tidy and Serial. Overall they return almost the same results, but some have their own specific rules. This tool is great at finding little trivial errors like the missing of a closing tag or a typo in a tag and so on. Once you install it you don’t have to run it constantly; all you need to do is to peak in the bottom right corner and if you see a red icon it means that something is wrong. If the icon is green, all is good!
PageInfo from Wirble offers a quick way to see a lot of information about the currently browsed page. It opens a top window where you can see things like page size, last date modified, all meta tags, available feeds, media files and the latest header exchanges. You activate the window with Ctrl-I, so if you are doing some kind of debugging where you want to constantly check the page size and the meta tags, PageInfo offers a really easy and quick way to do it.
ColorZilla is great for page designers. It’s a color picker, eyedropper and palette creator programmed by Alex Sirota. Basically it acts very much like the eyedropper in Photoshop allowing you to hover the mouse over parts of the screen and “grab” the color. During this process you can zoom the page up to the most detailed level and even full page zoom. But the best feature is the ability to analyze all the colors of all the elements in the DOM tree and come up with a complete palette. Using the palette you can then define colors for other elements so that they properly match the site color scheme.
SEOQuake is a very powerfull tool for those who are interested in optimizing their site for search engines. This tool allows the users to investigate many parameters of the current page through the eye of the SEO. It automatically creates lists of one, two, three and four words and calculates the keyword density, number of repeats and their location. By one click only it returns the google search volume and the estimated average cost per click. It creates a tag cloud, and it also lists the entire content of the page as seen by a search engine spider. You can use this tool while tweaking your pages for search engine optimization. It works very fast and provides a quick overview with one click. In addition SEOQuake adds supplementary information to search results for the most popular search engines. Lastly, it allows comparison of multiple websites by requesting all pertinent data from the various search engines. I think it is a must have tool for anyone who wishes to create a search engine friendly website.
Now that we got to the end of it, let me give you a brief summary of where I use these tools the most:
- Live HTTP Headers can be used to debug specific network and communications issues.
- HtmlValidator, Link Evaluator and YSlow can be used to make sure your site is compliant, free of errors and performs well.
- PageInfo can be used to quickly check your site information and make sure that all meta tags are in order (description, keywords, titles).
- SEOQuake, AddThis and AutoFill Forms can help you prepare your site for Search Engine Optimization and then submit it to various sites and social networks.
- ColorZilla is a generic cool tool that you can use to manipulate and work with colors.
So, there you have it, my all time favorite FireFox add-ons! I hope you enjoyed this post and hope to see you all soon!