Channels ▼
RSS

Open Source

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

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

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.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video