Cross-browser Debugging
A number of code monkeys that I know use the Web Developer Toolbar in conjunction with the Firefox browser. The addition of a menu/toolbar is quite handy, especially the abilities to enable or disable JavaScript and CSS, and providing line guides and rules to ensure proper alignment of layout elements. Despite being so comprehensive in its features, it lacks the ability to view the loaded assets of a page, explore the DOM tree, or view box model for any element.
This is where Firebug comes in, allowing you to not only inspect an element with one click to reveal all of its defined and inherited styles and attributes, but also to edit the properties in the browser without having to make changes to the source documents.
With the most recent version of Firefox, I had issues with viewing the attributes and styles of the A element, but I found that an upgrade to beta version 1.1 solved the problem.
And for testing in Safari, Opera or dreaded Internet Explorer, they offer Firebug Lite that can be implemented via Javascript file to take advantage of the console object, which can be very useful for debugging JavaScript. I plan to write in further detail later about the wonder and majesty of this feature, so stay tuned.
If you enjoy the inspection aspect of Firebug, there is another cross-browser tool available called pi.debugger. It does not work with Safari (at least not version 3) but performs like a champ on IE, Camino and Flock. The script can be downloaded to your workspace or linked to from the Google source page in the link.
Given the number of options and resources available, the task of finding that one property that is throwing your whole layout off should be made that much easier. Happy hunting!
ADDITION: Westciv has released a slick bookmarklet called XRAY that lets you inspect elements in almost any browser.
