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.

Firefox browser could not display Java applets following a recent upgrade to the Firefox browser and the Java JRE. A simple solution found.

A little background to this story. As a devout convert to the Firefox browser, I immediately upgraded to the latest release, Version 1.0.2, when it became available. Shortly after upgrading the Firefox browser I found I was unable to access my internet banking account, and was displayed a standard message from the internet banking service that my browser did not have Java installed. Necessity forced me to use IE, which worked with no problems. I had also accessed the internet banking account through Firefox only a few days previously, so there was something wrong with Firefox!

I dutifully checked my browser settings and Java was enabled. I then checked the Java control panel and noticed that the option to use Java with Mozilla/Netscape was unchecked. Found the culprit? Unfortunately not. After checking the option and pressing apply, I was informed that the action could not be completed as I did not have sufficient rights to change the browser settings. Now this was a concern, as I am administrator, super-administrator, and any other kind of controlling power over my pc, or so I thought.

Time to start on a solution, so Google in hand I went on a wild search for others who had faced the same problem. It would seem that this is a reasonably new problem (at the time of writing), as very few results were returned. Those results that were on-topic offered a selection of causes/solutions, none of which worked for me. As a result of trying each solution in turn, and scouring through the folders and files associated with both Firefox and Java, I did find what was the apparent cause of the problem in my case. On the latest update to the Java JRE, the Java Plugin dll had not been updated in the Firefox plugins folder. On a whim I renamed the existing Java plugin dll and fired up Firefox again, and hey presto, everything was working. Now I don't know why the original dll had not been updated, but it hadn't, and I don't know if this solution will work for everybody, but it did for me, and I offer this advice in the hope that it can help somebody in the same position as I found myself.

Symptoms:

• Unable to view Java applet content in Firefox browser

Cause:

• Upgrade of Java JRE to version 1.5.0_02 does not update Java plugin dll in Firefox plugins folder

Solution:

• Delete previous Java plugin dll file NPOJI610.dll from Firefox plugins folder.

• Prior to deleting the file I would suggest renaming the file (zz_NPOJI610.dll) to test that this solution works for you.

Machine Spec:

• Windows XP Pro SP1

• Firefox 1.0.1

• Java JRE 1.5.0_02