If you haven't played around with firebug before - or even used firefox, it would be a good thing to explore if you are a web developer. Of course this is a very general article but it will cover some of the uses that I have for firebug on a regular basis. This article also assumes you have read some of the firebug instructions.
I use this a large amount of the time when working on the design and layout of a website. It is especially handy when working on projects you have no previous knowledge of.
The typical way to test for design bugs would have been:
view the source until you find the spot you think the element is
add a coloured border to the css to double check that was the correct element
then apply you fixes refreshing the page everytime a change is implemented
Now using firebug html tab and inspector:
inspect the element directly - which then shows you the source and the css applied to the element as well as highlighting the padding and margins of the element.
using the html tab and css view next to it you can
Add/edit/delete values directly and see it happen on the fly
Add/edit/delete attributes on the element and also see it happen on the fly
<form id="main_form" method="post"></form>
//test if prototype running $('main_form') //run that in the console
//test if jquery is running $('#main_form') //run that in the console
The command that returns a form element is the library that is running on that element.
You can use console.log() over the alert() function to display outputs while debugging. The console also shows when ajax calls are run including the paramaters sent, data returned and the header status; which are all important when debugging ajax.
F12 will load/close the firebug window or tab depending how you set it up. (Windows machine)