A Simple Javascript Debug console

Mouse over this link to execute some javascript that contains a call to the debug() function.

To demonstrate how much better this is than using alert() statements, click here to toggle between alert() and debug(). Note how debug() is much less intrusive, allowing the script to continue execution without waiting for the user. This makes it much more appropriate for use when developing an Ajax application. The millisecond precision timestamps also help track down timing issues.

You can view the script here. The debug() function takes a single argument, the string to display. It then creates a new row at the top of a table. To this row it adds a cell containing a timestamp, and another cell containing the debug string. The table is created when first required and is placed within a div with id="debugconsole" which allows for easy styling. In this example, the debugconsole is given an explicit height and set to overflow automatically which gives the nice scroll effect when there are a lot of entries. The debugconsole is attached to the DOM as the last child of the body but this could be easily changed if required.

This has been tested with Firefox 1.07, Opera 8.02 and IE 6.? on Windows