JSLog - a Lightweight Ajax logger

Dec 18, 2005 by Andre

What JSLog looks like

When collapsed, it sits unobtrusively in the upper left-hand corner of the page like so: spacer
When expanded, it looks like this:
spacer

Why you should use JSLog

Every language needs a System.out.println() or a Console.writeLine() -- a quick and easy way to output messages to you, the developer, during development and testing. Historically, Javascript programmers have used alert() for this purpose. The problems are:

  1. alert() forces you to acknowledge each message, which makes it very bad for debugging things like loops and mouseovers
  2. there's no graceful way to begin "productionizing" your code when it has a bunch of alerts() in it -- you have to go through and delete all the alerts or comment them out
  3. alert() notifications are incredibly intrusive, and while they are there in your code, it's impossible to ignore them
  4. once you acknowledge an alert() box, it's contents are gone and you can't refer to it again
Safe to say that if you've done AJAX programming, you are sick of alert(). JSLog solves these problems! Read on for more details.

Expanding and Collapsing the logging panel

A double-click on the "handle" expands or collapses the logger display. Regardless of whether it's expanded or collapsed, you can log messages to it, and if it's collapsed, the number in the handle increments to show you the total number of logged messages.

If you have the scriptaculous libraries available, JSLog will automatically detect their availability and allow you to drag the logging panel to anywhere on the screen. In between page refreshes, JSLog remembers its location and state (expanded/collapsed). So, you can bring it front and center to debug something, and then just as easily place it out of the way in a corner somewhere.

Let's get started! Installation and usage

Installation is dead simple. Download the one .js file (see the top of this page), and include it on your page. That's all you need -- no additional stylesheets or anything (in case you're wondering, JSLog appends it's own small stylesheet on instantiation. But you don't need to worry about it, it happens behind the scenes).

To use, just place calls to JSLog where ever it makes sense for development or debugging -- in mouseovers, onclicks, pageloads, loops, etc. Here are some examples to get you started:

Including this script instantiates a Javascript object called jslog. To begin using the logger, there's just one method you need to know:

Try it. Your whole page should look like this: