Must have firefox addons for web development

It's been a few days since I last posted as have been busy busy with various things, mostly work related but some which will hopefully become more apparent as time goes on.

Anyway, as far as an introduction to this post goes one needs not look much further than the title. There are literally hundreds of firefox addons out there of varying usefulness so I'm just going to go over three I use in development.

ShowIP
ShowIP is a handy little addon which sits on your bottom bar and displays the current IP address of the page you are currently on. Clicking the IP address will give you a few handy little options like going to the whois entry for the address - conviently in a new tab.

Web Developer
Web developer is a very cool tool bar addition. I won't go through the full functionality here but some useful options are:

• The ability to quickly disable JavaScript, Cookies, Cache, page colours etc - all dead handy if you're working to a W3C accessibility guidline
• Useful cookie operations if you're debugging your code and wondering where the chuffing hell those cookies went.
• The ability to disable css by category, view a page's css, even edit the css on the fly (though I use firebug for this - ssee below)
• Form manipulation tools including swapping POSTS and GETS and a lot of other functionality
• An information drop down that tells you just about everything about the page - one of the most useful parts I found was the "Display Element Information" (bound to ctrl+shift+F) which will outline your html elements with a red border and display their information if you click on them.
• There's rulers (handy when you're fiddling about with images and css), there's line guides, there's options to outline different elements, resize the page, edit the html on the fly, and so much more
• There's also a tools menu with links for page validation including HTML (ctrl+shift+H), css, feeds, WAI and so on.

It's a great tool, I still find new bits in it all the time.

Firebug
This is definitly full of epic win. Firebug gives you a nice pane in the bottom of the browser window where you can see your html and css (plus other bits) in a sane and readable manner. Also, mousing over your html elements in firebug shows them highlighted with an overlay in the browser, with different colours for the padding, margin, border etc. You can view an elements css with all the inheritance laid out nicely and even dive in and edit it on the fly which is an enormous boon if you are from the "trial and error" school of css like myself.

There are as I mentioned loads and loads of other addons for firefox out there to be discovered - if you find a good one let me know!

Someone did point me in the direction of an IE viewer addon to test your page in IE... I prefer just to use IE as I trust it to really foul things up properly. Although for those that don't know www.browsershots.org is an amazing if slow way to get screenshots of your page in about 100 different browsers across OSX, recent windows and various linux distro's.

I think that's enough from me today, have a nice weekend!