Hewitt notes that since Firebug is a browser plug-in, it can parse and inspect content as the browser loads a page:
In the article, Hewitt explains why Firebug is a convenient Web design debugging tool as well:
When your mouse moves over anything that represents an HTML element in Firebug, the element's rectangle in the page is highlighted, and its margin, border, padding, and content are each shaded a different color.
Positioning elements with CSS can also be challenging because you must always remain conscious of the container that defines its local coordinate space. Firebug helps you visualize this by using rulers and guidelines. While viewing the Layout tab, moving your mouse inside the box causes rulers to appear along the bounds of the element's container. Guidelines also appear tangent to each edge of the box so that you can see where the edges intersect the rulers.
You can then step forward line-by-line to analyze how the state of the program changes in real time. Breakpoints need not be triggered indiscriminately; Firebug lets you specify the circumstances under which a breakpoint is triggered.
What similar Ajax and CSS debugging tools have you found useful in your projects?
I had a co-worker who was a big user of the Venkman Firefox extension. It was very powerful for what he needed, and he really liked how it helped him. He eventually switched to Firebug. Venkman was too confusing for me to ever use.
Once he showed our team Firebug, we all gave it a try and really got into client-side debugging. Firebug was really easy for me to learn.
Eventually most of our team was debugging on the client side with Firebug and on the server-side using their IDE of choice (our project was Java on the server-side so our team was mostly Intellij users and one Eclipse holdout).
Many times our workflow involved using both client and server side debugging tools at the same time jumping between the browser based and IDE based debuggers. We all had (at least) two screens which made this easier.
Using both client and server-side debugging together in our workflow really helped us save time when working on trickier issues.
Firebug was easier to learn for me. Both had similar features, but it did seem like Venkman had more options when debugging.
I only used Venkman for a short time and didn't learn everything it was capable. For the simple debugging I was doing, Firebug included all the features I needed. I can't think of a feature I used with one that didn't exist in the other.
I didn't do enough with Venkman to make a feature-by-feature comparison.
I do still find myself using both Firebug and the Web Developer extension.
The problem with that video is the length and quality of the demo display image. Instead of using a video camera, it would have been much better to record the display directly (while still recording the audio of the presentation).