Right click any element on the page that you wish to inspect/edit and select the Inspect Element option. The Firebug panel opens with the HTML displayed, and the element you selected highlighted. In the right panel are the CSS styles attached to that element. From here we can make changes to the current styles, or add new styles.

I do this constantly when working on sites as it gives me realtime feedback and visualisation of the changes I make. Once the styles are working correctly and everything is looking the way you want it to it's time to copy all those changes back into the actual stylesheet. But can you remember all the changes you made, and to what elements? This is where the pro tip comes into play.

To the right of each of the style declarations is a hyperlink to the relevant CSS file and the line number the declaration is on in that file. Click this link to display the full CSS file in the Firebug CSS panel. Click the Edit button in the panel to view the plain text content of the CSS file, including the changes you've just made. You can now select all, copy and paste into the actual stylesheet. That's it!! Save the stylesheet and transfer it to the server to see all the changes applied to the live site.

But every cloud has a silver lining. A chance to rid myself of no longer needed cruft, and cut back to the bare essentials. So here is my list of plugins, in no particular order, that make Firefox such a cool tool for any web developer.

• NoScript – makes the web a safer place to browse. Selectively allow scripts and browser plugins to run on individual sites, block the stuff you don't want, never be click-jacked!
• Foxmarks – synchronise bookmarks between all of your computers. Home, work, mobile – all in sync, all the time.
• Firebug – live editing, debugging and monitoring of CSS, HTML and JavaScript as you browse. Plus network monitoring, JavaScript profiling, DOM exploration. Is there anything this magical tool cannot do?
• Web Developer Toolbar -information and page control at your fingertips. Turn stuff on, turn stuff off, view hidden stuff, measure it, highlight it, analyse it. Beautiful!
• Colorzilla – the latest version of this add-on adds the ability to create colour palletes from any page, on top of it's already outstanding eyedropper and colour picker. Lots of other features make this an essential tool for working with colour.
• LiveHTTP Headers -View headers and responses as you browse the web. Essential for debugging cookie, server and HTTP transaction information.
• Operator – View and interact with microformat and other semantic data on a web page. Extract contact, location, event, taxanomic details into various applications for storage and/or immediate use.

So there we have it, seven plugins that make light of many web development tasks. No doubt there are others that do the same type of job, but these are the best of breed as far as I'm concerned.

Do you use something different, or have a must have recommendation? Comments are open, feel free to let everyone know what you think.

This is a big step for me. My current design tools are Photoshop 7, Illustrator 8 and InDesign 1.0. The new CS2 package looks very funky, with a whole load of new features, tighter inter-product integration, and the capabilities of Version Cue and Adobe Bridge look set to blow my current workflow out of the water. It looks like I will be heading back to the numerous tutorial sites to get the lowdown on all the new features. If you have any favourites, let me know.

The web development bundle, Macromedia Studio 8, is almost totally new to me. I'm a hardcore hand coder – Notepad2 is my friend. I have, in earlier times, used FrontPage and GoLive, and quickly learnt of their inherent evilness. Since then, my feelings towards such development tools have been somewhat jaded. But with the latest version of Dreamweaver there does appear, on the surface at least, to be a whole lot more flexibility in the setup of the software and how it is used, to get the best of both worlds. Hand coding in a structured, project based develpment tool. It may take me a while to get to using Dreamweaver as my primary development tool – there are a lot of things to learn, and psychological hurdles to get over.

Again, if you have any tips, trick or tales of setting up and using Dreamweaver to aid in the creation of bloat free, standards compliant websites, then let me know.

Another huge change will be from my current Flash 5 (how retro), to the all new Flash Professional 8. I'm not a huge user of Flash. As enhancement to a site, yes. As major elements (navigation, content, forms, etc), NO. But the latest version will give me the flexibility to produce more compact, interactive Flash elements.

So that's me set for the next few weeks, setting up new software to my personal requirements, learning what's new and how to use them. I'll let you know how things go.