jsTrace

General Information

Purpose
This script is an attempt to replicate the functionality of ActionScript’s Trace window in JavaScript (to get rid of those nasty alert boxes usually used when debugging).
Current Version
1.3 (1 November 2005)
Requirements
If you would like a draggable window, it requires Aaron Boodman’s DOM Drag Library (included with the “drag” distribution)

Use

In the head of your document, include the JavaScript file(s):

<script type="text/javascript" src="/path/to/jsTrace.js"></script>
<script type="text/javascript" src="/path/to/dom-drag.js"></script>

Then, simply add the following function to your main JavaScript file (or a library you use) to allow you to trace messages to the window:

function trace( msg ){
  if( typeof( jsTrace ) != 'undefined' ){
    jsTrace.send( msg );
  }
}

Whenever you want to trace something to the window, simply call trace():

trace( 'This message goes to the window' );

The best part is, when you are finished debugging, you leave the trace calls in your code and can simply delete the references to the two JavaScript files from the head of your document and it will not cause JavaScript errors.

Demo

You can view this script in action if you have a modern browser. The window is draggable and resizable. You can also clear the window or set a delimeter to mark your place.

Change Log

1.0 (26 October 2005)
Initial script
1.1 (29 October 2005)
  • “Memory” enhancement (by Joe Shelby) added (position & size remembered via an open cookie).
  • Size of additional tools text increased
  • Streamlined creation of new tools (for future development)
  • Added generic timer function (for future development)
  • jsTrace.kill renamed jsTrace.killWindow
1.2 (30 October 2005)
Added buffer for traces executed before the window is drawn
1.3 (1 November 2005)
Buffer fix for IE and viewport now scrolls with the content (newest lines show by default)

Optimized Releases

These releases have been optimized for production by removing unnecessary white space, carriage returns, etc.

Development Version

If you are interested in helping to further develop this script, you can download the uncompressed JavaScript source file.