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

I have been looking around a fair bit recently in a bid to improve performance on a number of sites… And naturally came upon YSlow for FireBug. This is a plugin that does website component profiling based on analysing the performance of all elements loaded into DOM. It examines headers, compression, size, response time, content types and can produce an accurate depiction of your worst performing scripts, stylesheets or images.

It also has a great advisory feature that uses YUI’s best practices in website optimisation (such as, gzipping components, using CDNs, marginalising background images, minimizing requests, to name but a few). It measures and ranks your site and makes you want to tweak it and improve…

I had a long play with various ways of improving but eventually came get to the best results (as speed and size gains) via some mod_rewrite .htaccess trickey:

## enable gzip page compression!
php_flag zlib.output_compression On
php_value zlib.output_compression_level 5

# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

<Files *.js>
SetOutputFilter DEFLATE
</Files>

<Files *.css>
SetOutputFilter DEFLATE
</Files>

# set clientside cache per element type
# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>

This is a combination between cache controls and compression that you can tweak and deploy as needed. If you have relatively static .html or .php files, you can also try adding |html|php or whatever other extension you may see fit. Have fun.