One of the first tools we reach for when it comes to troubleshooting CSS layouts or JavaScript behavior, is a wonderful add-on for Firefox; Firebug. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

• HTML Development - Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
• Firebug and CSS Layout - When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, padding, and sizes for you.
• Instant HTML, CSS, and DOM Views - As soon as you open Firebug you can examine the Web page markup, styling, and object model. Three tabs -- HTML, CSS, and DOM -- activate as soon as you open Firebug. If you are a HTML author or CSS designer, this may be all of the Firebug you need. As long as you don't enable other panels, the overhead caused by using the Firebug should be small: by default Firebug keeps all the expensive features off.