Ten Best Firefox Plugins for Web Developers

Why are Firefox extensions important? As technology and internet improves, more and more work is done by using only the browser and certain web services.

Ten years ago you needed Microsoft Office or Open Office to make a document, a presentation or a spreadsheet. Now you can use Google Docs, at least for basic documents.

You needed specific programs for every task, now you can do everything in just one application, the browser. By using web applications you also have the huge advantage of being able to easily share your work with certain people and that makes teamwork much easier.

Therefore it's important that you are able to customize your browser and add new functionalities to it. And that's where extensions come in. With the right Add-ons you can make work even easier. There will come a time when almost 100% of work will be done through the web browser and browser extensions will become even more important than they already are.

Debugging code is one of the hardest and most annoying parts of any software development. Web development is no exception to the rule. You write some simple PHP or JavaScript code and it won't work.

You don't have a clue what is wrong and like it or not, you are gonna have to debug your code. That's where some Firefox extensions come in handy. After all, debugging code is not the favorite part of any web developer so we have to use every possible tool to make it easier and quicker.

There are so many add-ons available that I don't even know where to begin. Let's start with the most popular and probably most important Firefox extension for web developers, FireBug.

Firebug is one of the best Firefox plugins I ever used. If you are a web developer, web designer or just happen to love website code like HTML, CSS and JavaScript, you simply need it. If you don't have it yet, you are missing a lot. I know I sound like a bad commercial, but this tool simply is excellent.
Firebug is an advanced Firefox extension that can locate any HTML element within the site you are currently watching. But it can also do so much more.

If you want to change some CSS code and see how it reflects on the page in real-time, you can do that with Firebug. You can change HTML code and see the changes on the web site in real-time.

You can go through all the cookies of the web site and see their values. You can go through the whole HTML code and see exactly where each of the HTML elements are on the page.

Ok, to put it in one sentence: you can explore and change every single part of the page you are watching, even the smallest parts. Of course the changes you make are only temporary and you can't mess up the web site code in any way.

If you mess up just reload the web site and the changes will be gone. Firebug is capable of doing even more. There are extensions for Firebug available, that make this tool even better.

Firecookie is a Firebug addon that makes it possible for you to manage cookies in your browser.

With it you can create, delete or edit existing cookies. It makes it possible for you to view all the cookies for the site you are currently viewing. You can also set their permissions and much more. It's a great tool for managing cookies.

FirePHP is a Firebug plugin that allows you to log to your Firebug Console using a PHP method call. I had many issues debugging PHP code and this tool helped me a lot.

FirePHP is a PHP debugging tool. Imagine you write a PHP script and you get an error. Debugging PHP can be a tough nut as no real debuggers are available. Debugging with FirePHP is still not the easiest thing in the world, but it is easier than looking through endless amount of log files.

You just download the library, include it in your project and make a few simple method calls. Now load your project in Firefox with Firebug and FirePHP installed and you can see all the info in the Firebug console.

YSlow is another great Firebug extension. It analyses web pages and gives you all the reasons why it's loading slow and why you should do something about it. Google doesn't look to kindly on slow loading web pages.

This add-on gives you all the info you'll ever need to improve your web sites performance.YSlow is based on Yahoo!'s rules for high performance web sites.

Firebug doesn't slow down your browsing, you don't have to worry about that. Just believe me when I say, if you want to get into web development, Firebug is one of the tools you will need in every case.

Many people think, web design is the easy part of web development. Well, it's not. Making a site pleasing for the eye while keeping the functionality and SEO optimization of the web site can be a hard job.

You have to position the elements in just the right order, design them in a way so they fit together perfectly, but most importantly, you need to know what people like. Everyone who tried to design a template for a website at some point, knows what I'm talking about.

Thankfully there are Firefox extensions available to help us design the perfect template just a little quicker.

One such extension is the web developers toolbar. This Firefox extension adds some really neat web developer tools to the browser like the option to disable stiles or the possibility to display CSS by media type.

The web developers toolbar can be called the Swiss army knife of web developing. It really makes web design and making layouts easier.

ColorZilla is another very useful Firefox add-on, that can help you deal with the annoying problem of color choosing.

Web designers, who haven't got much experience yet can sometimes have a hard time selecting the right color code so it would match a particular web site. At least this was one of the problems I had when I first started with web developing.

ColorZilla can be very helpful with that. It is a tool that allows you to select any color from a web site and get the color code. You can select any color from a web site, it doesn't matter if it's a normal web element, a flash plugin or even an iframe.

MeasureIt is a small, simple yet genius tool. It allows you to draw a ruler everywhere on the web page. This way you can measure virtually anything on a particular web page.

The only thing you can do is measure, it has no other features. But keep in mind, a carpenters most important tool is the measuring tape. The same rule applies to web developers.

One of the most important things when testing a newly developed web site is how it looks when different screen resolutions are applied. You have two choices, either you change your screen resolution and see how your master piece looks like, or you use a Firefox add-on.

Firesizer is a Firefox extension, that allows you to view any web page in different window dimensions. Unlike other extensions, this add-on sets the size of the entire window, not just the html area.

When you install Firesizer, you can see an option in the add-on bar where you can set the desired window size. You can set it to one of the predefined sizes or to a custom size. You can even save the current size if you wish.

Code validation is the final step in web development. It is very important your HTML and CSS code has no errors in it. While it is true most browsers will be able to display your page if you have only minor mistakes, search engines won't be so forgiving. Especially Google lowers your rank as soon as it finds any error on your page, even if it's so small your visitors won't notice.
If, for example, you forget to add a slash and your code looks like this:

<br>

instead of the proper syntax:

<br/>

browsers will still display the web page properly and nobody will care you forgot a slash. Nobody except for the search engines.
Nowadays you can not afford to publish a non-validated page.

Fortunately there are tools and services available to help you with code validation. There are also some neat Firefox add-ons that can help you with that.

HTML Validator does exactly what its name suggests. It validates the code of any web page you visit and shows you the number of errors it finds in the HTML code. It also displays any errors on the viewed page.

This way you can fix them or smile secretly because you realize more webpages have HTML errors as you thought. HTML validation can be a pain if you don't have the right tools to help you with that. HTML validator is one such tool.

Another validator, and this one is really great. Total Validator is a convenient tool that performs four types of validation: HTML validation, accessibility validation, broken links and even spell checks. The spell checks can be performed in different languages.
It's a tool I can't live without anymore.

But it does require you to install the Total Validator application on your computer because the Firefox add-on uses this application to perform all the required checks. Don't worry, the basic application is still free. If you want to be able to perform even more checks, like CSS validation, you will have to buy the pro version, which costs $40.

In case you didn't find what you are looking for, you can still create your own Firefox extension that does exactly what you want. Every add-on had to be made by someone. If you didn't find the tool you needed you could build and publish it.

One thing is for sure, you were not the only person who looked for it and you won't be the last. By building the extension you were searching for you do a favor to all the people, who will search for the same thing you did.

Of course there are advantages and drawbacks to it. One advantage is, you learn something new and can use the newly aquired skills to become better at your job or your hobby. You also get to publish an extension, which can bring you fame and fortune. The last advantage depends on how good your add-on will be, so don't get too exited.

You usually lose a lot of time building your first extension. That's one of the drawbacks. That's normal because you are learning something new and it usually takes time to aquire a new skill.

There are many tutorials available for Firefox extensins available, one of them is the lifehacker tutorial.