Top 10 FireFox addons for Web Developers

[ad#336x280 Large Rectangle] Share

FireFoxFireFox 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.

1. FireBug

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:

The way to interact with it is either by popping it out using the icon on the status bar, or by right-clicking anywhere on the screen and selecting "Inspect Element" which jumps directly to the html element selected. The FireBug window is divided in two. On the left side you can select between viewing the Html of the page, the CSS currently loaded, the Scripts currently loaded, the Document Object Model and even the network load. The viewer shows a perfectly formatted view and it allows you to alter the code directly and see what happens. On the right side, you have the style, which can be shown as definition or interpreted (how does the browser see it ultimately after applying all the rules). Also on the right side you can see the layout of each element. Here you can alter the margins, borders, padding, height and width and, again, you can see the changes live as you make them - that because FireBug modifies the page directly in the browser's memory. So, forget about re-writing your html dozens of times and testing it in the browser each time just to get that perfectly aligned object. Just load FireBug and make all the changes you need and then edit your final code. One extremely nifty feature is a fully loaded Javascript debugger. You can set breakpoints, step through the code and so on. What I would like to see in the future is the ability to expand minified javascript for easy debugging. Overall, this is one of the most valuable tools I have ever used.

FireBug

2. YSlow

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.

YSlow

3. Web Developer

The Web Developer Add-on is a development / debugging tool created by Chris Pederik. It adds a comprehensive menu and a tool bar to FireFox with various tools. It looks a lot like it's offering the same things as FireBug, but just the way it is presented makes it a little less apealing, at least to me. However, it is still very useful in allowing you to see in one shot a lot of things about the page. You have many options that basically dissect the currently viewed page during browsing. For instance, you may select the option View Image Dimensions and this will cause a little box to be shown next to each image displaying the image size. I really wish that the option would be persisted. In other words, if I browse to a new page, while in the same browser session, I would expect this option to stay on. However, it resets every time, which is a bit of a drag. But overall, this tool is loaded. If you have a hard time finding a certain bug on your page, you don't know why something is showing or not showing, overlapping or being pushed to the side, you can use this tool to figure it out. It's also very cool for testing purposes when you want to see how a site acts if the browser accepts or doesn't accept cookies, if it supports or not javascript and so on. I do admit that the tool can be a little overwhelming but it's a good addition to your add-ons.

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.

5. AddThis

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.

Live HTTP Headers

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.

LinkEvaluator

8. HtmlValidator

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!

HtmlValidator

9. PageInfo

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.

10. ColorZilla

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.

11. SEOQuake

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.

SEOQuake

Now that we got to the end of it, let me give you a brief summary of where I use these tools the most:

  • FireBug and WebDeveloper are awesome tools for fine tuning your HTML code and CSS definitions, to debug the javascript code and test your site under different conditions.
  • 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!

Iulian

Sharing is caring...Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on LinkedInShare on StumbleUponDigg this
  • Susan Andrews

    very helpful article….thanks!

  • ingilizce çeviri

    Thanks for posting. Every web developer will find something useful here.

  • Pingback: uberVU - social comments()

  • Park Lee

    You mentioned Chrome… will you post something similar for Chrome? I think it would help a lot!

  • I'll definitely do that… It's in the works. I hope I will get to it in the next few weeks… regards!