How do you debug Display/CSS issues in multiple browsers?

Question

Say I need to develop a web site for multiple browsers. major ones - Firefox, Safari, IE, Opera, Chrome

How do you debug display issues? In Firefox there's Firebug, which is great. There also is a Firebug Lite for other browsers, but it's not full featured - it does not refresh in real-time. For example, if I suspect that jQuery is slowing it down (adding classes, etc), how would I find out?

Answer 1

• Firefox has Firebug
• Opera has Dragonfly
• IE8 has developer tools
• Webkit browsers (Chrome/Safari) have web inspector

Aside from these, you may want to look up the outline property which adds a border to elements, but without disrupting the page flow. This is useful for side-by-side comparisons.

If you have some classes being applied with jQuery, simply use the outline property on them and it should appear when the class is added.

.class1 {
  outline: 1px solid blue;
}
.class2 {
  outline: 1px solid red;
}