JSLog - a Lightweight Ajax logger

Dec 18 by Andre

What:

This is a lightweight, self-contained logging panel which takes the place of alert() boxes for your AJAX and DHTML applications. It is unobtrusive, easy to use, and can stay in your code through deployment.

Why:

Ajax development is easier when you have a logging system like this:
  • convenient: always a click away ;
  • asynchronous: no need to acknowledge each message ;
  • can be turned on or off globally with a simple config change ;
  • easy to use: just include one .js on your page ;
  • stays in your code throughout development and deployment ;
  • lightweight: just over 6 Kb & places just two tokens into the namespace ;
  • framework agnostic: Like Prototype? Mochikit? Rico? Dojo? JSLog works with all of them!
 Download
v0.7, 4/13/06 changelog

Download full source with comments

See an example

What JSLog looks like

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

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:

This will log a message immediately upon page page load.

Next, add some event-based log entries to get a feel for how it works:

Methods on the JSLog Object

So far you've seen two methods on the jslog object -- jslog.info() and jslog.debug(). Here are all the methods:

  • These methods all create entries in JSLog. The only difference is the severity of the entry created:
    • jslog.debug()
    • jslog.info()
    • jslog.warning()
    • jslog.error()
  • The next method places text in JSLog's text box -- the one at the botom of the JSLog panel. This is useful if, during debugging, you need a convenient place to put a large block of text which wouldn't fit well in a normal JSLog entry.
    • jslog.text()

Configuration: enabling/disabling JSLog

In the jslog.js file, find the line: var Config_Logging_Enabled = true;

When set to true, this enables JSLog on every page on which JSLog included. When set to false, JSLog will not appear on any page, regardless of whether or not the jslog.js file is included. The idea is allow you to switch your entire site from development/debug mode to production mode by simply changing this one configuration setting.

Next: JSLog Example »

TrackBack URL:

Listed below are links to weblogs that reference JSLog - a Lightweight Ajax logger:

» AJAX from Merkblatt
JSLog - JavaScript Log [Read More]

Tracked on April 25, 2006 02:50 AM

Comments

1

stritti on Aug 01

Interessting logger! Probably you want to add it as new Appender to Log4js (http://log4js.berlios.de)?

My goal is to unify all the logging APIs which are growing currently.

2

Andre Lewis on Aug 03

stritti: thanks for the heads up on Log4js. The goal of JSLog is a little different - it's to present a very simple debug output mechanism, without a lot of choices to make. It's neither better not worse, just a different design philosophy.

3

Stefan Holmberg on Oct 24

I have been looking at console loggers for days until I found yours. Just what I needed! I have created a asp.net wrapper around it, allowing for global debugging on/off (autogenerating "dummy" class when in production) and embedding the javascript so no external files are needed. Thanks for your great code!

4

Keith Mashinter on Jan 24

Nice work -- simple and useful. I have a couple of recommended changes to open it up to run an eval() to get any String rather than just the innerHTML of something. Altered code is below, and I've changed the go button to a-link so that it becomes a tab stop.

function getHTML(){
var _15=$(_a+"_idToInspect").value;
if(_15==""){
warning("Provide a non-blank javascript reference, e.g. $(myelementid).innerHTML");
}else{
try{
var _16=$(_a+"_textArea").value=eval("new String("+_15+")");
info("new String("+_15+") is now in the text box below!");
}
catch(e){
error("Could not get new String("+_15+"): "+e.message);
}
EC.F.setCookie(_9+"_idToInspect",_15);
}
}

// ...

go

5

Alex Escalante on Jan 24

Well, its difficult to be unobtrusive if you use global objects and functions, don't you think?

Just for starters: I loaded jslog with another library and it didn't work. It showed a message saying :

"Code-level error initializing jslog: undefined"

And then I can see in the source it looks for some "Draggable" constructor there, maybe from Prototype, Scriptacolous or something. What if I also have a Draggable object I wrote myself (which is the case)? It will blow.

To summarize: it is a bit ingenuous to say "unobtrusive" and "self-contained" in this case.

6

Andre Lewis on Jan 24

Alex, JavaScript makes it quite difficult to write code which is guaranteed to never collide with anything else. Generally, you want to clutter the global namespace with as few tokens as possible -- JSLog puts only 2 (or it may be 3) in the global namespace. Which is much preferred to having a bunch of loose functions sitting around.

You have a point about it checking for Draggable. I'd like to remove it's use of Prototype/Scriptaculous, and internalize the dragging code -- of course, you're always welcome to send me a patch with improvements ;-)

7

Fredrik Gustafson on Jun 20

Hi,
I like JSLog very much, nice and easy to use. However, one problem I encountered was that
it seems to interfere with the page layout -
in my instance it cause a couple of lines to
be longer, thereby pushing content away on the
page - and this was done only by including the
jslog script file. This prevents me unfortunately
from keeping logging statements in the code, instead I have to comment everything out before
the JSP pages are deployed. Is there a solution for this somehow?

Regards
Fredrik

8

yuan cai on Dec 02

Very useful.I'm a java programmer from china.
In java there are four method such as isDebugEnabled(),isInfoEnabled(),isWarnEnabled(),isErrorEnabled().

Considered of efficiency,I think these are also useful.


if(jslog.isDebugEnabled())
{
jslog.debug("debug message");
jslog.debug("debug message2");
jslog.debug("debug message3");
}


Three method will not run if debug is disabled.

9

Peter Bremer on Oct 20

You call this an "AJAX logger". However, AJAX implies an application that is both client- and server-side. As far as I can tell, your application is only DHTML!

It's great you say you have "LESS web 2.0", but you're still mis-using it's hype...

10

Christiaan on Jan 20

I found a very particular error. When u include DOMassistant 2.7.4 and jslog together then the onload event in body doesn't fire in IE6 en IE7. Try this and find that the alert doesn't show. When you remove just one of both script includes, the alert shows.










Post a comment

 
This is so filters can reject the spam-bots. Thanks!