Simulating a Firebug, Safari or Opera debugging console in Microsoft Internet Explorer with Faux Console

Faux Console is a JavaScript that simulates a debugging console for IE. If you write JavaScript you obviously need to debug your scripts while you write them.

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 console.log() calls.

This is why I wrote Faux Console, which is a small JavaScript you can embed in the document to have a basic debugging console in IE.

Simply include the script and the styles in the HEAD of your document:

<style type="text/css">@import 'fauxconsole.css';</style>
<script type="text/javascript" src="fauxconsole.js"></script>

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 console.log() to log information cross-browser. The script does the following:

• It tests if there is a console object defined - if there is one this means your browser has a console and the script does nothing else.
• If console is 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 DIV which 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 fauxconsole to the DIV (unless there is another element with that ID) and you can style the console using that. The preset CSS fauxconsole.css is pretty basic and shows the console as a grey box fixed to the top right corner of the viewport.

Hope this helps you debugging,

Chris