Site Navigation
vegUISiteKit - Using the Debug Console
written by vegu on 14 Mar, 2007 09:06:00
I used alert messages to debug my javascript code for a long time. I always wanted to make a little debug console that i can just blend in in some convenient place that i could use to print my various debug messages to, but i kept pushing it back.
With development of the VSK i finally decided to give it a go, because using alert to debug your js code has certain disadvantages like it messing up any timers you may have running in the background, or it getting stuck in an infinite loop - because youre coding at 5 AM running on 5 hours of sleep ;) - without you getting out of it short of killing the browser's process.
And finally the debug message is gone once you close the alert popup.
The VSK console can be set up and integrated into your current project fairly easily. Simply include all the required vsk files somewhere in your HTML head.
<head>
...
<script src="vegui.sk.std.js" type="text/javascript"></script>
<script src="vegui.sk.window.js" type="text/javascript"></script>
<script src="vegui.sk.debug.js" type="text/javascript"></script>
...
</head>
Then start the console with some js code some where in your page, preferably linked to the onload function of the body (internet explorer acts up some time if you dont). Either ways you
start the console by calling the
vsk_dbg_start() function.
The first argument defines where you want the console to lock to your browser's screen.
'b' - locks it to the bottom of your screen (wide)
't' - locks it to the top of your screen (wide)
'ul' - locks it to the upper left corner of your screen
'lr' - locks it to the lower right corner of your screen
The second argument is the amount of lines that can be in the console at any time.
When using the ul or lr mode you can also submit a third and fourth argument for the console's width and height.
Printing to the console
Once your console is running you can simply write messages to it using the
vsk_dbg_print() function.
vsk_dbg_print('This is a debug message', 'red');
The first argument is the message that you would like to print to the console. The second argument is optional and defines the color of the message.
Closing the console
Once you're done with the console, or if you want to just get rid of it for some reason you can simply close it by calling vsk_dbg_stop().
Rotating the console's position
Since - depending on your project - the content of the page may be dynamic and moving around you can simply rotate the console's lock position on the page by clicking on it.
Related Posts
Your Comment
Comments
No comments yet.