Well since Fire fox got updated and I have got the universal package browser for web design I thought why not share it to those who do not know about these tools so here we go. I will explain each tool and what it is used for and then give you the simple instructions on where to get it and where to find it.

First download Firefox
http://www.mozilla.com/products/download.h...&lang=en-US

then install it and your set from there, Now for the plug-ins and add-ons.

ColorZilla

What this program does is that once you select it a small ink dropper icon will show up and when you move it around it gives you the hex and the RGB code for that color. So if you want to use that color you can copy it down and use it for your web design. So where do I download it, install it and find it to be used.
Download it here
https://addons.mozilla.org/firefox/271/

You can find it at the bottom left corner next to MeasureIt or you can right click and select it from there as well.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

CSSViewer
This next Add-on/plug-in does exactly that, In the last few years web designers have been switching from hard coding their design to css. With css designers are able to design 1 page of coding that will be universally use through out the whole website. So what does CSS viewer simple, you get to see what that css code looks like for that website. The benefits of this well you get a better understanding how CSS design works and how to effectively use it. Downside is that people can copy it down and then modify it to there news thus saving the hard work of doing it by scratch. When you download it and install it you will see it up top under the url bar and the navigation bar as well. It is a simple drop down menu in which has options on who you want to view it. So where do I download it, install it and find it to be used.

Download it here

https://addons.mozilla.org/firefox/2104/

Install it from your desktop and it will appear under the navigation toolbar or if right click you can select it there as well.

Firefox Update
Is not been updated but a substitute for it is under the Web Developer plug-in CSSViewer.

Next Add-on/plug-in

Html validation
Name says it all with this Add-on/plug-in, you click on the drop down menu to what you want to validate, HTML, CSS, RSS Feeds, Links, Section 508 (security), find out how fast the page loads and more. The validation is done by w3.org who's validation is supreme as to what it check. Although sometimes there are errors that are not errors, but thats another story. So where do I download it, install it and find it to be used. Best part about it if you look at your your url bar you will notice that it is yellow if you do that means the website is 100% valid in html and css and whatever else you can think of.

Download it here

https://addons.mozilla.org/firefox/249/

After installing it from your desktop you will see it under the navigation toolbar.

Firefox Update
It works for FF 2.0


Next Add-on/plug-in

MeasureIt

Basically this little Add-on/plug-in measure the width and height of your website in pixels. Meaning you could get proper measurements for you site and be able to use them in your div tags alot better without the need to trial and error it to make sure everything lines up correctly. From the info page they do mention that the ie tab Add-on/plug-in doesn't work well with it. Maybe in a future update it will. So Where do I download it and install and then use it. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/539/

Install it on your computer, open Firefox and you will see it on the bottom left corner right next to colorzilla Add-on/plug-in.

Firefox Update
It works for FF 2.0


Next Add-on/plug-in

View Source Chart
This Add-on/plug-in basically is another way to view the website source code, but in a more structured way, it could be useful or it could be a waste of space depending how you want to use it. So where do I download it, install it and find it to be used.

Download it here

https://addons.mozilla.org/firefox/655/

install it from your desktop and all you have to do is right click somewhere on the website and select View Source Chart


Firefox Update
It works for FF 2.0

Next Add-on/plug-in

Web Developer
By the time you have installed most of the Add-on/plug-ins you have most of what you need. But if want the ultimate package then you need to download this Add-on/plug-ins. This has so much stuff on top of what I mention it would take a while to type it all down but once you download it you never go back. So where do I download it, install it and find it to be used.

Well to Download it go here

https://addons.mozilla.org/firefox/60/

Install it from your desktop and then when you open Firefox you will see it under the navigation tool bar you can't miss it, since it is a series of drop down menus and what not. Also if you right click as well you can select the tools in those sub-menu's

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

X-ray

This Add-on/plug-ins basically is another way to look at the source code of the website. But it's usefulness is like beyond your imagination. Because it saves the time and effort of trying to look at the source code and then back to the website and then back to the source code again. It also shows you how that part of the page was set up as well. So where do I download it, install it and find it to be used.

Well to download it go here

https://addons.mozilla.org/firefox/1802/

Install it on your computer and then to use it right click and select X-ray and your set it's that easy.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

FireFTP
This basic add-on/plug-in is simple, if you webmaster and you want to move multiple files and you don't have enough Hardrive left on your computer to download ftp software then this little add-on/plug-in is all you need to move all those files instead of uploading them one at a time.
So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/684/

Install it on your computer and to use it click on toe Tools menu and then select it from there and your set to load up all those files and what not.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

IE Tab
So you want to create the ultimate site that is both fluid in FireFox and Internet Explorer? well with this add-on/plug-in you can do exactly that. This add-on/plug-in also saves the time of you going back and forth between browsers when all you have to do is go back in forth in tabs, this not only saves you the time but computer resource usage as well. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/1419/

Install it from your desktop then right click on the tab and then select Switch rendering engine and then BAM you have you website on what it will look like in IE. Side note like I mentioned about MeasureIt doesn't seem to work with this add-on/plug-in at this time So I will keep you update when and if it happens.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

Window Resizer
So you want to test out out you newly create website in different computer resolutions and you don't feel like right clicking and changing your resolution every time you change the code to the site. Well have no fear this little add-on/plug-in will do the trick with this you will be able to change the way firefox looks at different resolutions with out spending 3 minutes everyitme going through each setting just to make sure your fluid design stays fluid. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/1985/

Installs automatically and to use it click on tools menu in the browser and select resize window and your done.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

Opera View
Same concept as the IE tab but you can view what your site will look like in the Opera Browser. So where do I download it, install it and find it to be used.

Download Here
https://addons.mozilla.org/firefox/1190/

Install automatically, then to use it just right click the page and select opera view

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

Load Time Analyzer
With this extension you be able to optimize your coding and images by seeing how long it takes for your web page to load in different aspects. Like css style sheets, scripts images and other stuff. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/3371/

installs automatically you will find it on top of the tabs you can't miss it.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

Offline Validator
So you don't feel like uploading your page to your website and then test it's validation and then reedit it from there then upload the page over and over. With this extension you will be able to validate it offline from your computer and be able to make any changes you need to without all that hassle. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/2520/

Install automatically, to use it go to tools and select validate page and it goes through it's little process and bam there you go.

Firefox Update
It works for FF 2.0

So with all these add-ons and plug-ins you will be set to design websites without all the hassle and stress that goes with it and using different programs just to get it right. So enjoy these tools and use them well and you could be designing just as well. Also I as go through the add-ons/plug-ins I will let you know about them through updates and what not. Also if I am missing anything that web designers could use drop a post or pm and I will make sure to add it and what not.

This post has been edited by saint-michael: Oct 28 2006, 11:52 AM

I currently have and use most of those. View Formatted Source is a nice one too. It load the source code in a cleaner, easy to read format where you can expand and minimize parts of the code. I use Colorzilla, Measureit and FireFTP very frequently. I also use EditCSS, which loads the CSS in a sidebar on the left and the page will change as you edit it.

The xray extension I find to be sort of annoying. I think that the View source chart is more useful.

Yeah, this is very good list, I have all those extensions installed except for FireFTP, just because I don't really need it.. But in my opinion, the best one out of those extensions is WebDeveloper, which was always helping me

It is a pity, that CSSViewer still does not work for the FF2 :|

I know that web developer extension has css view as well, I mention that in both extensions.

Awesome!

Yes!
Thank you so much
I was looking for that I don't know for how long :/
Now that my website is in its late stages I'm in need of it
As said the only downside is that some listed plugins do not work yet under 2.0
FF has some neat plugins I must say

Well only 1 plug in doesn't work however the web developer plug in completes most of what I just posted. Just look around and you can find it.

Selenium IDE is also a helpful tool, not only in web programming, but also many other applications. It allows you to record macros in order to test web applications and such.

https://addons.mozilla.org/firefox/2079/

An excellent post saint-michael! I always wanted to use Firefox as my default browser. (I'd used it here and there. In net centers etc. But never had it in my system.) Only yesterday I was able to install it in my office system. (It's difficult to get sign offs from various Security guys to install a software in my company. Somehow I pulled it through). It was only yesterday that I was wondering which pluggins might come handy.

In fact I had downloaded most of the extensions listed in your post. Unfortunately I saw your post just now. Anyway I'll add the ones that I left out yesterday to my "Install" list.

It was really a very informative post. Considering the fact that there are more than 4000 pluggins+extension for Firefox.

Thanks dude.

just to throw in a little post bump, by now all the plug-ins should have been updated by firefox, if you haven't seen the update you might have to manually install them.