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

Question

Let's say I need to develop a website for multiple browsers. the main ones are Firefox, Safari, IE, Opera, Chrome

How do you debug display issues? Firefox has Firebug, which is great. There is also Firebug Lite for other browsers, but it is not fully functional - it does not update in real time. For example, if I suspect jQuery is slowing it down (adding classes, etc.), how would I know?

Answer 1

• Firefox has firebug
• Opera has a dragonfly
• IE8 Developer Tools
• Webkit (Chrome/Safari) -

, , , . .

, jQuery, outline , , .

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

Answer 2

IE8

Answer 3

CSS W3C CSS Validation Service

CSS Validator

• IE
• Opera Dragonfly
• Safari Web Inspector

Answer 4

For cross-browser debugging, you can use Firebug Lite . This is similar to Firebug, but as an external JavaScript library and tested in FF, Opera Safari and even in good IE (as stated in the web page).

Answer 5

Check out my new tool to view the layout of any item on your page, luring it in - CROSS BROWSER!

Visualizer HTML Document - GitHub