AJAX Debugging with Firebug

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:

>>> console.log
    ("My aunt", auntName, 
        "has", sonCount, "sons.");
My aunt Susie has 3 sons.

The function is also capable of formatting arguments in the tradition of C's printf. The same line, therefore, can be written as:

>>> console.log
    ("My aunt %s has %d sons.", 
        auntName, sonCount);
My aunt Susie has 3 sons.

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:

>>> console.debug
    ("%s - %d", title,  
        lastAccess)
Guestbook - 1342391823

>>> console.info
    ("%d new objects created", 
        objects.length)
18 new objects created

>>> console.warning
    ("The connection to %s was 
        aborted.", url)
The connection to 
    http://example.com was aborted.

>>> console.error
    ("The file '%s' could not 
        be opened.", filePath)
The file 'c:/data.txt' could 
    not be opened.

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:

>>> console.log
    ("element:", document.body)
element: body

>>> console.log
    ("header: %o",
        document.getElementById
            ("header1"))
header: h1#header1