Wednesday, July 19, 2006

Javascript Logger Console (Part 2)

This is the extension from Part 1. I've added some extra functionality for the Log Console.

There is an option bar the the bottom of the console. You can clear the console. You can select to show either the messages or error. There's a hide/show where it will minimize / maximize the console pane.



Currently I place the console on the right side of the page. Sometimes, it may be blocking part of your page. You may want to make it dragable. I've use scriptaculous to do the job. Just insert the code below after you initialize the logconsole.

new Draggable('logconsole',{revert:false,handle:logtitle});

Extra tips:

If you use, alert to debug your javascript codes, you will have to comment out or remove those codes. Using a logger console, you can disable (hide) the console when moving your application online.

logConsole.enable(false);

If a user hits a problem you can activate/show the console on the selected browser itself. This will assist if you hit a unique user related issues.

javascript:logConsole.enable(true);

Download the logConsole.js and logConsole.css to try it out.
For furthur enhancement, I will work on not only logging in console. Error logs should be added to a log database. This will help to administer and monitor your applications.

6 comments:

Anonymous said...

Very nice!

Anonymous said...

it's great, but when I try to setup the code in my program, it always show "logtitle undefined". I have copy everything and install prototype and scriptaculous sadly it is not work. Would you provide a simple example?

William Beh said...

Check out the first post.

In your HTML head basically you just need to put in sample code as below:

<script language="JavaScript" type="text/javascript" src="<prototypepath>/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="logconsole.js"></script>
<link rel='stylesheet' type='text/css' href='logconsole.css'>
<script language="JavaScript" type="text/javascript">
<!--
Event.observe(window, 'load', setLog, false);
var logConsole;
function setLog(){
logConsole = new LogConsole();
logConsole.enable(true); //false to disable;
logConsole.logMsg("message"); //log message;
logConsole.logError("error message"); //log error message;
}
//-->
</script>

AtomicSEO said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
kucheng said...
This comment has been removed by a blog administrator.