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 cousinsdebug, 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.
>>> console.log ("element:", document.body) element: body >>> console.log ("header: %o", document.getElementById ("header1")) header: h1#header1