Section 14.6. Using MochiKit.Logging to Debug

14.6. Using MochiKit.Logging to Debug

At this time, Firefox is the best web browser when it comes to debugging your JavaScript. Tools such as FireBug, the Web Developer extension, and the Venkman debugger provide many tools for tracking down problems with your JavaScript. But, odds are that you don't live in a Firefox-only world. Internet Explorer is still the dominant web browser, and a sizable percentage of Mac users use Safari. The cross-platform Opera browser also has a respectable following.

With all of these browsers to deal with, what is the tool that JavaScript programmers turn to? Generally, that tool is alert(message). It's guaranteed to be available everywhere, but it's really annoying. Heaven forbid that you'd accidentally leave an alert call in your code, because that's always a sure way to drive customers away.

MochiKit.Logging provides a much more convenient way to add debugging instrumentation to your code. If you've used Python's logging module, you'll feel right at home with MochiKit.Logging. Even if you haven't, it's easy to use and ties in nicely with your browser's own native features.

14.6.1. Using Logging

The simplest way to use logging is with the log(msg[, obj, ...]). If you call log("Hi there!"), a logging message will appear.

You might be wondering where it will appear, particularly if you try that in the interactive interpreter and don't see any output. By default, it will appear in your browser's native console. Safari and Opera 9 both have the notion of a console they can print to. Firefox with the FireBug extension does, too. With Internet Explorer, MochiKit.Logging will interact with the Microsoft Script Debugger and the Atlas framework.

There is also a cross-browser way to view the logging output. You can add a bookmarklet that points to javascript:MochiKit.Logging.logger.debuggingBookmarklet(). Clicking that bookmarklet will display the logging output. The current version of MochiKit displays the log output in an alert box by default, but at least you only get one alert box instead of many.

MochiKit also includes a much nicer view of log messages that even includes filtering. By calling createLoggingPane(inline), you'll get a DOM node for this nicer view that you can then put in a pop-up window or wherever you want. If you call that function with inline=true, you don't need to worry about where to put it: MochiKit automatically places the node at the bottom of your document.

Figure 14.2 at the end of this section is a screenshot that includes the logging pane.

Figure 14.2. Logging Demo

14.6.2. Extended Logging

If you've used Python's logging module at all, you'd probably guess that there's more to MochiKit.Logging than just a log function. There is, indeed. For a great many applications, log (and some way to view the output) is all you need.

MochiKit.Logging supports different log levels, much like Python's logging module. There are five logging levels defined: DEBUG, INFO, WARNING, ERROR, and FATAL. You can call a log<LEVEL>(msg) function, such as logDebug(msg), to log a message at a given level.

Logging levels can be helpful for visually identifying different kinds of messages as you're skimming the log output. But, they become most useful when combined with a listener that does something special.

A simple example is to display an alert if there is an ERROR or FATAL level log message. This can be done using built-in parts of MochiKit:

  log.addListener("error_alert", "ERROR", alertListener);   logError("This will appear in an alert box");

Writing your own listener is easy enough: It's just a function. Listener functions take a single parameter: a LogMessage object that has num, level, info, and timestamp properties. num is a unique number identifying the message, level is the logging level for the message. info is an array of all the parameters passed to the log function. timestamp is a Date object reflecting when the message was logged.

With your own listener, and some of the techniques presented later in this chapter, you could save ERROR or FATAL log information on your server via Ajax, conveniently giving your app a built-in bug-reporting feature.

Note

There are some other methods available on the logger object and some configuration flexibility such as the number of messages stored. These types of things are not commonly used, but you should consult the MochiKit.Logging documentation if you find that the module provides almost, but not quite, what you need for your application.

14.6.3. Simple Logging Demo

In this section, we show off a demo of MochiKit.Logging. With the demo page, pictured in Figure 14.2, you can enter a logging message with a log level and see the message appear in MochiKit's logging pane at the bottom of the screen.

Here is the code for the logging demo: