You never realize how useful tracing is until you have a function that will just not work. Or when you an event firing for no apparent reason.

How is tracing normally done? Different tracing systems and methods have different syntax and usage, but generally you would put messages like "entered method", "value of varA =", or "exiting function" in your code and these are then saved to a "trace log".

Ok, that's great, so what makes jTrace special? Glad you asked, how many times have you thrown an alert message in your code and then had to pound on either the space-bar, the enter-key, or your mouse-button to cycle through all of the alert messages? How many times have you lost count of how many alert messages triggered or even what the last value that you put in your alert was? Alright, how many times did you 'accidentally' leave that alert message in your code because you forgot exactly where you put it, deployed your code to your live server and then had to dig through it all to fix that one message you left in on accident? This is where jTrace comes in. In just about the same amount of code as an alert box you can put tracing in and not have to worry about any more alerts. When you are finished tracing you can do a simple search/find for "jTrace" and delete every line/entry of it that exists on your page. It also displays an on-screen log that numbers the events as they are triggered so you don't have to figure out why your functions/animations are triggering incorrectly or partially. I also use it to debug JSTL variables (since jTrace runs client side the jstl variables are all populated and I can tie an event to display all of my JSTL variables).

Can I see some examples of jTrace in action? Of course! You may have already noticed the box in the bottom right of the screen. That box is the "jTrace Window", it's where all the trace messages show up. To see it working, click on the li element below.

Clicking on this link will give you another trace message.

The above trace message was set using the onclick event. All that was needed was to type onclick="jTrace('You clicked the link','');" in the a-tag (I also used a javascript:void(null); for the href, I like compliant code ;) ).

If you click on this paragraph, you should get an error message in the jTrace window. When setting up your trace message you can pass 'error' and your message will show red in the jTrace Window.

You can also pass 'warning' messages. These appear green in the jTrace Window. I've used a setTimeout function to throw a jTrace message 30 seconds after you have opened this page.

jTrace sounds pretty cool, are there any known bugs with it? Unfortunately there are, here's the short list of known bugs:

Please Note: jTrace does not actually 'save' any messages, it's an on-screen log only. So when you refresh the page you are working on with it, it starts over... tabula rasa style.