When collapsed, it sits unobtrusively in the upper left-hand
corner of the page like so:
When expanded, it looks like this:
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:
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.
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: