Debugging Web 2.0

jsTracer is a simple yet feature rich JavaScript logging and debugging tool. It is especially useful for debugging what has been coined "Web 2.0" code.

As the demand for increasingly complex JavaScript development rises with the appeal of "Web 2.0", I've been shocked to discover how few tools are available for the JavaScript developer. This is especially true of cross browser development.

jsTracer was written to help fill this void.


jsTracer provides a simple service, it allows you to log messages to a trace window from your JavaScript. It is equally as simple to implement and use.

jsTracer stands out by providing the following features.

There are some simple trace statements being generated by mouse events on this page. Keep your eye peeled for them as you read along.

A Brief Tutorial
  1. Include the jsTracer.js file in your page.
    <script type="text/javascript" src="jstracer.js"></script>
  2. Start writing messages.
    jstracer.write("Hello World!");

Thats it! It doesn't get much simpler than that; however, there are some tips and tricks that will improve your user experience with jsTracer.

  1. jsTracer supports 3 message types.
    • Info = 1 (default)
    • Warning = 2
    • Error = 3
    These message types are also exposed via the MessageType property of the jsTracer object which can be accessed like this:
    To specify a message type, simply pass it as the second argument to the write method.
    jstracer.write("An error message!", jstracer.MessageType.ERROR);
    //or simply...
    jstracer.write("An error message!", 3);
  2. You can add custom CSS to your trace statements to help delineate them from other messages. Simply pass your CSS as the third argument to the write method.
    jstracer.write("Use custom CSS", 1, "background-color:green;color:white;font-weight:bold");
  3. The stack trace option is off by default, so in order to collect stack information on trace statements that are written prior to page load, you will need to enable stack collection via script like so:

To learn more about jsTracer and see some examples of how to use it in your JavaScript development, please visit the live demos and documentation sections.