jsTracer

Introduction

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.

• Ease of use
• Cross browser compatibility
• Stack trace viewer
• Avoid "slow script" warnings during heavy tracing
• Message ordering that makes sense
• Message highlighting
• Custom CSS for messages
• Professional GUI

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.

Tips

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:
   jstracer.MessageType.INFO
   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:
   jstracer.enableStackTrace();

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.