A classic debugging
trick is to use
alert() from time to time to output data. The drawback of this
solution is that you need to click the close button or hit enter to make the
alert disappear which can be very time consuming if you try to monitor changing
data in a loop.
Browsers like Safari, Opera and Firefox using the amazing Firebug extension
therefore offer you a different way to output debugging information using the
console.log() command. Microsoft Internet Explorer does not support this
though and I found myself sending work-in-progress files to colleagues and getting
reports of failure back because I forgot to comment out some
Simply include the script and the styles in the
HEAD of your document:
The functionality is very basic and if you want to have a full-blown cross-browser logging solution, you might want to take a look at the Yahoo User Interface Logger Widget instead.
Using Faux Console however means that you don't need to include lots of YUI
files if you don't use the YUI and that you can use
log information cross-browser. The script does the following:
- It tests if there is a
consoleobject defined - if there is one this means your browser has a console and the script does nothing else.
undefined, the script creates a new console object and adds a DIV to the body of the document.
- It adds a close and clear link to that
DIVwhich allow you to hide or wipe the console.
- It provides you with the following methods:
console.log(message)- adds message to the log
console.show()- shows the console
console.hide()- hides the console
- The script adds the ID
DIV(unless there is another element with that ID) and you can style the console using that. The preset CSS
fauxconsole.cssis pretty basic and shows the console as a grey box fixed to the top right corner of the viewport.
Hope this helps you debugging,