JavaScript Trace Window

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.

8 thoughts on “JavaScript Trace Window

  1. Thats lovely.
    1 Would it be possible for it to work with javascript libraries rather than just js in the main page.

    2 Could you post the unescaped source for educational purposes?

  2. Great code, this will be fantastic.

    You may want to look in to setting the z-index of your div to float it as high on the page as possible. I have a page using CSS to keep the a div fixed on the right side when scrolling, and I couldn’t see the debugging box because it was behind the div.

    Also, it would be nice to be able to easily declare an x and y where the box will appear.

  3. Solved script library problem:

    Put this function in the main html page and call it from a script lib. As an added bonus you then have a single point to disable it.

    function greaseMonkeyDebug(foo) {
    t = foo;


  4. also doesnt work for me, installed greasemonkey, installed the userscript, wrote a script with t assigned and nothing….

Comments are closed.