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.

<script src="Logger.js"></script>

This log console is drawable; sliding up and down by clicking the tab. Or, you can toggle the console on/off by calling Logger.toggle(), or Logger.open() and Logger.close().


Logger can be completely hidden from web browser by calling Logger.hide(). To get it back, call Logger.show().


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.

Logger can be disabled logging messages programatically. When Logger.disable() is called, any subsequent message will be ignored to print. In order to enable to print messages to the logger window again, call Logger.enable().


v1.19: Replaced "var" to "let" keyword.
v1.18: Call toString() for "Object" type.
v1.17: Print array elements for "Array" object.
           Print "object" for Object, and "function" for Function type.
v1.16: Removed vendor-specific border-radius CSS.
           Added left text-align on the logger container.
v1.15: Fixed height issue for box-sizing CSS.
v1.14: Added toggle() to open or close the logger window.
           Changed show()/hide() for visibility.
v1.13: Added the class name along with version string.
v1.12: Removed width and added margin-left for msgDiv.
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.


Hide Comments
comments powered by Disqus