Open Source

AJAX Debugging with Firebug

By Joe Hewitt, January 10, 2007

Firebug is a Firefox extension that includes all the tools you need for efficient debugging during the Web development process.

Log Debugging

Firebug is not just a way for you to examine a page from the outside; it is also a place for you to send messages from within the page itself. To facilitate this, Firebug provides every web page loaded in Firefox with the console object that contains a number of functions for logging. As your script executes, you can fill the console with an ongoing stream of data for you to analyze.

The simplest way to write to the Firebug console is by calling the console.log function:

>>> console.log("Hello World!")
Hello World

When you want to write program data to the console, you have a number of options. First, console.log accepts an infinite number of arguments that are joined together when written to the console:

The output of console.log is an undecorated line of text. If you'd like to add some visual distinction to each line to make the log easier to read, you can try one of console.log's cousinsdebug, info, warning, and error:

Another advantage of using debug, info, warning, and error is that they output a hyperlink to the line of the script where they were called. When you click this link, the Firebug debugger opens the pertinent script and highlights the line that caused the log message.

One problem with logging is that it can easily lead to a long list of messages that blur together, making it difficult to understand when they were called in the program flow. The console object provides the functions group and groupEnd to create nested blocks that illustrate which processes are on the stack when a message is logged.

Most programming consoles offer little more than lifeless streams of text, but the Firebug console is fully interactive. If you pass a structured object (such as a JavaScript object or DOM element) to any logging function, the result is not a textual snapshot of that object but a hyperlink. Click the link to open the relevant Firebug tab and inspect the object in greater detail. An HTML element, for instance, is shown in the live HTML inspector. A function is shown in the context of its source file in the Script tab. All other objects are shown in the DOM inspector:

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task.
However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Video

This month's Dr. Dobb's Journal

This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!