JavaScript Trace Window

by Tom Mullaly on August 18, 2005

If you’re like me, you make extensive use of the alert() method when debugging your client-side JavaScript. You’ve been there – your script isn’t working as it should, so you begin to add a mutlitude of alert functions to output the values of particular variables at various points in your script. The problem with alert() is that it can be very obtrusive. For every alert, you need to click the OK button to proceed which wastes your time. alert() also provides no log that you review after the execution of your script, meaning that quite often you must run the script again and write the values down. The other problem is that typing alert() all the time is just way too many keypresses – and I hate typing unneccesary parenthesis!

So, having gotten tired of using alert() functions I looked at other solutions. Sure there is the Venkman Debugger for Firefox, but for most of the projects I work on, Venkman just seems to be a little bit of overkill. You can also use the debug method that can be used to output debug info to a console window, but that method seemed to be a little clumsy.

Enter my jsTrace Greasemonkey userscript.


The userscript is very simple to use. When you would like to trace a value to the trace window, simply assign a value into a variable named t and the value of t will be traced to the trace window. For example:

var name = "Jim";
t = "The value of name is : " + name;

Why did I choose the variable t? Well it’s short and I never use t in my code.

The trace window is not actually a window but rather a div container that is appended to the active document whenever a value is assigned into the variable t. The window can be moved by dragging the title bar, and can be closed by doubleclicking on the title bar.

Now the advantage of using a Greasemonkey Userscript for tracing debug information is that the debug information will only be displayed on the specified domains (file:/// and http://localhost/ by default) and only on your browser. If you forget to remove the trace statements from your script, your end users will not notice any negative effects. As the userscript can be targetted to specific domains, any page that exists under that domain will automatically have access to trace userscript, without you having to include any specific code to enable it.

Instructions for installing a userscript:

  • First, you need to install the Greasemonkey Firefox Extension.
  • Next, click on the link to view the JavaScript source for the jsTrace UserScript.
    Now click on the Firefox *Tools menu and click on the option that says Install This User Script.
  • Finally test the script by creating a new html file and place some JavaScript in that file that assigns a value into the variable t. Load the page into Firefox and see the trace window appear!

This is my first ever userscript and it is certainly probably far from perfect. If you have any comments, suggestions or feature requests, please post a comment, and I will do my best to add them to the script.

Be Sociable, Share!


Comments on this entry are closed.

Previous post:

Next post: