5 Firefox plugins for website development
The age old debate: IE vs Firefox? Well, we already know that Firefox is fast taking over IE’s dominance as the favorite web browser – but there are still a those that choose IE because they don’t know any better. I hope that after reading this (if you aren’t already using Firefox that is) you will be convinced that Firefox is the way to go.
First things first, if you are not using Firefox to develop and build your websites you need to start. Firefox is the defacto standard and if you are trying to build a website in IE you are making things 10 times harder on yourself so, let’s make you a better person.
First, go…..get Firefox.
But Firefox messes up the way my sites are displayed
Probably the most common argument that I have heard from die hard IE users is that “Firefox messes up the way my sites are displayed”.
Now I can see how this can be off putting for anyone thinking about changing browsers, but there is a very good reason for this. The culprit indeed is not Firefox, but rather IE. I have read many articles on why IE is so “un-standards” compliant and it makes sense once you think about it.
Imagine, your company distributes their browser with every single copy of the most widely used operating system. Now think, if you make that browser non standards compliant and all these users get accustomed to how this non-standards browser renders websites, then all other browsers will seem quirky.
The most important thing to remember is that IE is the buggy one – not Firefox
and other alternative browsers. Firefox is an open-source standards compliant browser, with much richer features. Most people know that Firefox’s most welcomed feature is Tabbed Browsing. This alone is reason to switch.
Necessary tools and plugins for Firefox
Below is my list of 3rd party extensions – which I am hoping will make you even more excited about moving over to Firefox.
Have you ever wanted to know how your site looked with a different color font, but had no idea how to find where the font color was in the template code? You are not using Firebug then.
Firebug is a plugin for Firefox that allows you to edit css on the fly as well as find where css or various code is located. There are lots of tools that you can plugin to Firefox to make your development day easier. Firebug is the most important though, and a great start to making you a better designer/developer/coder. Download Firebug here
Web Developer Toolbar
This, for any web designer/developer is probably THE most useful plug-in for Firefox. To summarize its extensive features, it allows you to display all css id and class tags on any site that you are viewing (every wanted to change something on your Joomla/Mambo site, but didn’t know where or what to change?). Then there is the live css editing with “preview-as-you-type”, outline all block level elements (tables, divs, etc) of the page, preview in different browser sizes, IE preview, css/html validator, etc etc etc. Check out the developers site for a full list of features: download Web Developer Toolbar here
Adds a small button to the bottom left of your browser window, that will allow you to click/drag and measure any element on your site. Really useful when working on your site/templates layout. Download MeasureIT here
Adds small button to the the bottom left of your browser window. This adds an “eyedrop” tool (like in Photoshop), which is handy to find out the Hex code of any color on your site. Download ColorZilla here
A full built in ftp client which loads within a new tab. This is a really great (lightweight) tool, which allows you to ftp your updated files while browsing the web. When ftp’ing lots of files at a time, it is recommended to open a new browser window and run it as a separate process – as it can affect performance. Download FireFTP here
. For a full list of extensions, see mozdev.org
Showing you how to use these tools is beyond the scope of this article, but isn’t terribly complicated. The developers websites go into detail if you need more involved help.
What’s your favorite extension? Help your fellow developers out by writing a comment below, be sure to include a link to your recommended Firefox tools.
Tags: css, development, plugins, tools of the trade