Browser Debugging Tools

We'll start off 2008 and talk about web browser debugging tools. It's a topic that we haven't visited before.

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 --

1. The structure ( HTML )
2. The layout and "look and feel" ( CSS )
3. The behavior ( JavaScript )

On Firefox, the defacto standard debugger is Joe Hewitt's Firebug. It's a great tool for debugging web pages on Firefox.


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.


Starting with 9.0, Opera has the Developer Console. It's a DOM, JavaScript and HTTP header inspector as well as allows you to dynamically edit CSS.


A good list of browser debugging tools is found here though the list is always growing. Those found above are "must haves."

Have fun!