Summary
In a recent Dr. Dobb's article, Firebug creator Joe Hewitt describes his popular open-source Ajax, HTML, and CSS debugging tool. The article provides examples of an Ajax debugging session, and shows how to use Firebug to trace the execution of JavaScript code inside Firefox.
Advertisement
A recent Dr. Dobb's Journal article, AJAX Debugging with Firebug, describes Firebug, a Firefox extension, as primarily an Ajax and JavaScript debugger. Penned by Firebug author Joe Hewitt, the article's title is somewhat of a misnomer: Firebug includes functionality beyond debugging Ajax applications. It can be used, for instance, to inspect CSS elements on any page loaded into Firefox and, more, to change page element attributes on the fly and see the effect of the change real-time in the browser window.
Hewitt notes that since Firebug is a browser plug-in, it can parse and inspect content as the browser loads a page:
You can open Firebug at any time to begin working on any page... Firebug breaks the page down into a set of tabs that depict its most important aspects—HTML, CSS, JavaScript, the DOM, network activity, and a console for errors and log messages... Firebug lets you browse code just as you browse the Web by presenting objects as hyperlinks that can take you from one view to another.
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.
The most powerful feature of Firebug, however, is its ability to trace the execution of JavaScript code:
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.
When an error occurs in JavaScript, a detailed description of the error is logged to Firebug's Console. After reading the message, you might wish you could have been in the debugger when the error occurred so that you could inspect the objects and call stack when it occurred.
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.
It's a bit long, but there are some interesting bits in there. Best watched while doing something else, like cooking or ironing, or it won't hold your attention.
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).
Previous Topic
