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.
Firebug
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
MeasureIT
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
ColorZilla
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
fireFTP
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
We are in love with everything web and embrace technology as a means to drive social change.
These plugins should help the typical web software developer/web junkie:
Google Gears (caching on steroids)
Page Speed (speeds up page loading)
YSlow (plugin from Yahoo to check what’s causing your page to load slowly, and what can be done to reduce load time. Important for software development)
FoxyProxy (useful if your site/software serves content based on different IPs)
.-= Mike´s last undefined ..If you register your site for free at =-.
One more thing:
“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”
Have a look at http://www.w3schools.com/browsers/browsers_stats.asp
It’s no longer “fast taking over”. Firefox has long taken over IE6, 7 and 8 **combined** :D
I have been using the ruler that comes as part of the Developer’s Toolbar, but thought MeasureIT sounded like it was worth a try. (Mainly to avoid going to a menu to turn the ruler off and on.)
Unfortunately, MeasureIT is NOT compatible with the latest version of FireFox.
Daniel, simply use the Nightly Tester tools addon to override compatibility issues.
This should be on the top 5 list as well, but it’s hard to drill down to only 5 to be honest.
Hey, that works! MeasureIT is way easier than my old method. Thanks!
Doing some browsing and noticed your website appears a bit confusedin my K-meleon internet browser. But fortunately hardly anyone uses it any longer but you may want to look into it.
Nice Plugins! I’ve used Firebug for awhile and love it!
Installed ‘Web developer Toolbar’ a few days ago and am very impressed with it.
.-= Gary´s last blog ..Google Speed Module to help WordPress =-.
Such an excellent write-up!
Excellent post. I was checking constantly this blog and I’m impressed! Extremely useful info particularly the last part :) I care for such info a lot. I was looking for this particular information for a long time. Thank you and best of luck.
Your article will definitely come in handy. Thank you for writing a great post.
I thank you for the informing topic.
I am glad for commenting to let you understand what a really good discovery my friend’s girl undergone browsing the blog. She even learned some issues, which included what it’s like to possess an ideal teaching style to get other people without problems fully grasp several tortuous subject matter. You really exceeded people’s expectations. Thanks for offering those priceless, safe, informative and even unique tips on this topic to Mary.
wonderful publish, very informative. I’m wondering why the opposite experts of this sector don’t realize this. You must proceed your writing. I am confident, you’ve a huge readers’ base already!