Want to see what a website looks like under the hood? Or maybe debug some script you've just written? It's hard to find a better tool than Mozilla's Firebug plugin for the Firefox browser. Chrome, Safari, and Opera browsers all have development tools that allow you explore the code and resources that makes a particular webiste go. Still, most developers I know prefer to use Firebug.

Browsing with Firefox, you can just click the firebug option and get a wealth of information about the page you're viewing.  Firebug always you to not only inspect the HTML and CSS code of a page, but also to edit it. Your edits are immediately reflected in your browser without actually changing the code on the server where the page lives. Refresh the page, and you see the original page (without your changes). 

You can also select a page element (a navbar or a paragraph, for example), and Firebug will display and highlight the code for that element. I often use Firebug to figure out what CSS IDs or classes are governing the style of a page element. Still within Firebug, I can then edit the CSS code for that section and try out all sorts of possibilities on the fly. When working on a site of my own, this is much more efficient that writing CSS code on the server, then refreshing the page, writing some more, refreshing again, and so on.

More recently, I've been using Firebug to debug my JavaScript. I can watch my code as it runs in Firebug's console view and even embed messages in my script using the console.log function. If you're using JavaScript to work with cookies, the Firecookie addon allows you to view, delete, manage, and even create cookies within your browser.

Firebug is a great tool for beginners who want to learn how webpages are structured and for experienced developers who want to debug their code.