Most web application/AJAX development takes place within the confines of either FireFox + Firebug or Webkit browsers and their consoles (firebug is now available on chrome?). However, other browsers (such as IE) lack console functionality and this presents a problem.
When in a hurry / under pressure, I have been known to forget to take out a console reference out of code that sneaks it’s way into the production environment. If not immediately noticeable, tucked away behind a loop / if statement, you’d never know about it… That is, until the error reports start flooding in.
Not wanting to find myself in such position again, I decided to write a little wrapper that can cater for nearly all of firebug’s console methods. The most common ones, such as console.log, console.info, console.clear and console.count are pre-defined but you can use the model and add others into the singleton. Check this fine firebug cheatsheet for more ideas on other methods you may want to port.
this.$C = { // console wrapper by D. Christoff @ http://fragged.org/ _version: 2.4, debug: true, // global debug on|off quietDismiss: true, // may want to just drop, or alert instead, method: "log", _hasConsole: function(_method) { var _method = _method || "log"; return typeof(console) == 'object' && typeof(console[_method]) != "undefined"; }, _consoleMethod: function() { if (!this.debug) return false; if (this._hasConsole(this.method)) { console[this.method].apply(console, arguments); } else if(!this.quietDismiss && arguments.length) { var result = ""; for (var i = 0, l = arguments.length; i < l; i++) result += arguments[i] + " ("+typeof arguments[i]+") "; alert(result); } }, log: function() { this.method = "log"; this._consoleMethod.apply(this, arguments); }, info: function() { this.method = "info"; this._consoleMethod.apply(this, arguments); }, warn: function() { this.method = "warn"; this._consoleMethod.apply(this, arguments); }, clear: function() { this.method = "clear"; this._consoleMethod.apply(this); }, count: function() { this.method = "count"; this._consoleMethod.apply(this, arguments); }, trace: function() { this.method = "trace"; this._consoleMethod.apply(this, arguments); }, assert: function() { this.method = "assert"; this._consoleMethod.apply(this, arguments); }, dir: function() { this.method = "dir"; this._consoleMethod.apply(this, arguments); } }; // end console wrapper. // example data and object $C.clear(); var foo = "foo", bar = document.getElementById("divImage"); $C.log(foo, bar); $C.count("loop"); $C.info("we are inside a loop!"); $C.count("loop"); $C.assert(parseInt("07") === 7) $C.warn("please use radix 10 when using parseInt"); // enable debugging of a function, eg, finding a hoisting bug... var consoleTesting = function() { $C.info("starting function debugging"); $C.trace(); $C.warn("a should be undefined but it is not, actually assigned to the function already:"); $C.info(a); // undefined? function a() { alert("hi"); } var a; $C.log(a.toString()); // the function }();
Here's a link to this in action on jsFiddle
The interface is simple, just use the "$C" namespace (name it what you like) instead of "console" will have the preserved functionality / results within FireFox, whereas IE users can either see an alert pop-up dialogue or nothing at all (if $C.quietDismiss = true).
// To disable the alerts in IE, do $C.quietDimiss = true; // To disable debug completely: $C.debug = false;
I hope somebody finds this useful...
update history
*update* thanks to divide by zero for the improvement - in this post.
*update again* this is a fix from the previous update, seems that safari's console cannot accept scoping through apply so I added a try {} catch {} block where it reverts to the old loop
*update again (15/02/10)* modded to support any possible console method with ease
*update again (08/04/10)* changes to the firebug API have resulted in certain console methods being dropped and others changed (for example, .debug no longer sets a breakpoint), the methods that are in the current version are: log, debug, info, warn, error, exception, assert, dir, dirxml, trace, group, groupEnd, groupCollapsed, time, timeEnd, profile, profileEnd, count, clear. More here: http://getfirebug.com/wiki/index.php/Console_API
*update again (17/02/11)* fixed to console.method.apply(console, arguments); as opposed to .apply(this, arguments) which fixes webkit and removes the need for a try block / iteration fallback. added console.dir
[…] Hier habe ich ein kleines Script gefunden, was überprüft, ob console definiert ist und wenn nicht, dann wird stattdessen ein Javascript-alert mit der logging-Ausgabe gemacht. Weil dies auf die Dauer aber auch nerven kann, kann man den alert über eine Variable einfach wieder abschalten. […]
…
Только у гения есть для новой мысли и новое слово. …
My javascript is rusty but I had to rename the property debug to _debug to avoid collision with the function C$.debug() in IE6 to get debug to work.