3

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?

Daniel Node.js
  • 6,734
  • 9
  • 35
  • 57
iceangel89
  • 6,113
  • 8
  • 40
  • 55

5 Answers5

6

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;
}
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
  • hmm IE6/7 does not have anything good tho? btw, i think IE* developer's tools dont have realtime updates like firebug for FF has? cos now the problem i am facing is when during/after jquery animaions. so i need the css to update there so i know whats happening. my qn for that here http://stackoverflow.com/questions/1194812/css-ie7-8-issues – iceangel89 Jul 29 '09 at 09:41
0

IE8 includes great developper tools

Olivier Payen
  • 15,198
  • 7
  • 41
  • 70
0

You can validate CSS using W3C CSS Validation Service

About About the CSS Validator

Developer Tools

Ahmed Atia
  • 17,848
  • 25
  • 91
  • 133
0

For cross-browser debugging, you can use Firebug Lite. It's like Firebug itself, but as an external JavaScript library and tested in FF, Opera Safari and even the good ol' IE (as the webpage states).

Boldewyn
  • 81,211
  • 44
  • 156
  • 212
0

Check out my new tool to view the layout of any element on your page by mousing over it - CROSS BROWSER!

HTML Box Visualizer - GitHub

Gabriel McAdams
  • 56,921
  • 12
  • 61
  • 77