All web-designers and developers should use the following developer tools:

• Firefox: install Firebug (http://getfirebug.com/), a free extension for easy comparison and debugging between your CSS and the output.
• Firefox/Chrome: install the Web Developer (http://chrispederick.com/work/web-developer/), a free extension adds many handy web developer tools to your browser.
• Safari 5+: use the Web Inspector (see http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html).
• Chrome: use the Developer Tools (see https://developers.google.com/chrome-developer-tools/docs/overview).
• Opera 9.5: use Dragonfly, a fully-featured debugging environment (see http://www.opera.com/dragonfly/).
• Internet Explorer 8+: use the Developer Tools (see http://msdn.microsoft.com/en-us/library/dd565628%28v=vs.85%29.aspx).
• Internet Explorer 6 and 7: install the IE Developer Toolbar (see http://www.microsoft.com/en-us/download/details.aspx?id=18359), or use Firebug Lite (see https://getfirebug.com/firebuglite).

They provide a lot of useful tools, among which DOM explorer, CSS editors, network inspector, etc., and are a huge help when debugging HTML, CSS, JavaScript, and even Ajax requests.