How to get It
Firebug is available for download at http://getfirebug.com Navigate to that page with your Firefox browser and click "Install Firebug".
You can go to the Add-Ons section (Add-Ons in menu or Ctrl+Shift+A) in Firefox, search for Friebug, and download/install it there.
How to use it
Never used Firebug before? Getting the console open is simple. On the page you want to work with in Firefox, right click somewhere on the page. You will see a new item at the bottom of this menu: Inspect Element with Firebug. This will open the Friebug Console at the bottom of your screen.
For details and tutorials, the Firebug site is a great resource. On Firebug's main page, there is a link toward the top of the page for Documentation. This takes you to their wiki. Within their wiki are FAQs, details on each panel available, and extensions. What you may find even more useful, though, is the Links page. These link include information on tutorials explaining the use of Firebug as well as information on how to use it with other tools like jQuery.
Once you've chosen to inspect an element, the HTML tab of the Firebug console will open with the chosen element hightlighted. You will notice that if you mouse over other elements, they will be highlighted in the screen above and you can switch which element is highlighted in the console by clicking on it.
The highlighted element in the HTML console, has it's style elements displayed in the style tab (to the right). This displays all css that apply to the chosen element. The real power of this console, comes from the ability to modify/edit the css (Style) and Html in the console and see the changes live on the screen. You can change the HTML shown or styles listed in span or div tags in the HTML section of the HTML console by clicking on the text. Any changes are visible on the page above immediately.
The Style tab has a number of ways to work with the CSS. For example, to remove a rule, you can click on the little circle with a line through it that appears the the left of the rule when you hover over it.
The icon will turn red and the line will be greyed out and the change will be visible on the page above immediately. Also, you can change the text in the css. You could, for example, change the width by clicking on the current width value and typing in a new value.
Another nice feature of the style editting in Firebug is that if you hover over a color value, ex. #636363, it will display a box of that color.
If you see a rule crossed out, it is because it is overruled by a different, more specific rule.
The Layout tab helps visualize padding, boarders, and margins.
If you are looking at styles on a grander scale than an element, you can access all CSS for the page on the CSS tab of the console.
This console has all the same features and functions as the Style tab on the HTML console, but the whole CSS file in question (in the image above, it's display.css) is shown. The name of the file is also a drop down list that allows you to choose which loaded CSS file you want to work with.
A good, complete explanation on how to use Firebug for script debugging is on DeveloperFusion.