Sample Test Page

Click the following links and you should see debug messages appear in the trace window to the right of this window.

Say Hello

Show Body innerHTML

Random Background Color

In the url field in the top frame, enter:

http://www.connectedpixel.com/debug/tracetest2.html

Adjust it for your domain.

How to use it

The files:

trace.js -- JavaScript file that contains the trace function. You must include it in the web page you are debugging. When you're done debugging, remove it and all the trace calls.

tracecontainer.html -- the container for the 3 frames you see here.

traceview.html -- Has the trace window.

traceurl.html -- Has the input field for entering the web page to be debugged.

I keep these files in the directory 'debug' under my root directory.

Your html page will need to include trace.js somewhere at the top of the file. Of course, you'll need to adjust the path in the src attribute.

<script language="javascript" type="text/javascript" src="trace.js"></script>

Then, wherever you want to trace something, add:

<script language="javascript" type="text/javascript">
trace("The value of x: " + x);
</script>

To debug your page, enter its url in the top frame.

This will not work if the url you are debugging is in a different doman from this frameset -- it's a JavaScript security feature. So don't try to debug your page on my site, it won't work.

If the trace window gets too much text in it, it will bog down. Press the clear button frequently.