←Back

JavaScript Logger

Download: Logger.js

Debugging JavaScript programs is somewhat difficult compared to other programming languages because JavaScript does not provide a console to print out debugging messages. You may frequently use alert() function to print out a message or numeric data if your program performs properly or not. But, sometimes, alert() method is not appropriate, for example, calling alert() method inside a loop. Plus, you must close this modal dialog window manually in order to continue to run your JavaScript program.

This JavaScript Logger class provides a simple but very handy logging feature to print debugging messages on a separate console window at the bottom of the web browser. (This page already enabled Logger. You will see the log console at the bottom of this page.)

In order to use this logger, you only need include Logger.js in your html page. Logger class will automatically create a console for you at the bottom of the browser window when it is first time invoked.

<head>
...
<script type="text/javascript" src="Logger.js"></script>
...
</head>

This log console is drawable; sliding up and down by clicking the tab. Or, you can toggle the console by calling Logger.show() and Logger.hide().

To print debugging messages to the console, simply call log() function in your JavaScript codes or HTML pages. Here are some examples how to use log() method.

log("Hello") : print a string, Hello
log(123)     : print a numeric value, 123
log()        : print a blank line

Type text and press the button to print the text to the console window.

 
Updates:
v1.11: Added clear() function.
v1.10: Added enable()/disable() functions.
v1.09: Added z-index attribute on the logger container.
v1.08: Use requestAnimationFrame() for animations.
v1.07: Wrap a message if it is longer than the window width.
v1.06: Print "undefined" or "null" if msg is undefined or null value.
v1.05: Added time stamp for log() (with no param).
v1.04: Modified handling undefined type of msg.
v1.03: Fixed the error when msg is undefined.
v1.02: Added sliding animation easy in/out using cosine
v1.01: Changed "display:none" to visibility:hidden for logDiv.
           Supported IE v8 without transparent background.
v1.00: First public release.

 

←Back
 
Hide Comments
comments powered by Disqus