At Yahoo!, we have graded browser support and so, as a frontend developer you tackle the problems found only in the major browsers.
“Major” means IE, Firefox, Safari and to a small degree Opera ( if you’re interested in browser market share, check this out. )
I code on a MacBook Pro running OSX 10.4 though I have an XP box to tackle issues on IE6/IE7. I also have access to a Vista box to take on that version’s IE7.
I don’t run multiple versions of IE or use a virtual PC image. I have the luxury of running all the browsers in their native environments.
Browser debuggers allow you to view and manipulate the three components that make up a web page --
- The structure ( HTML )
- The layout and "look and feel" ( CSS )
Firebug also supports add-ons like YSlow that analyzes your page and tells you why your page is slow based on Yahoo!'s 14 rules for high performance web sites.
I primarily use YSlow to see what I'm downloading. You'd be surprised at what you don't know you're bringing into the browser!
Similar to Firebug is the Developer Toolbar found for IE. Use it to inspect, change elements and styles on the page.
One of the features that I use a lot in the Developer Toolbar ( and in Firebug ) is the element inspector. With it, I can click on a DOM element and immediately see it's relationship with other elements and it's style. Understanding the structure and the CSS rules applied to it is critical to debugging a web page.
In Safari, you can use the Debug menu to inspect the DOM, but unlike Firebug or IE's Developer Toolbar, you can't live edit HTML or CSS. I suspect the Safari/Webkit folks will have this in the future. For now, it's the only choice you have for debugging web pages on Safari.
A good list of browser debugging tools is found here though the list is always growing. Those found above are "must haves."