how not to let console.log() to cause error on IE or other browsers

sometimes we solely use console.log() to debug on Firefox. (i think it is only defined when Firebug is installed?) And the code will break IE or any Firefox that doesn't have Firebug installed, since console and console.log will be undefined.

so i wonder how about disabling it just by

if (typeof console == "undefined" || typeof console.log == "undefined") var console = { log: function() {} };

at the very top of javascript code. It is true we could use

if (debugging) console.log(oDiv)

but then we need to constant turn debugging on and off on different browsers, and it is more troublesome to use "if (debugging)" every time.

This following line will work too:

if (typeof console == "undefined") var console = { log: function() {} };

except there might be some browser in which console is defined, but console.log is undefined... and using console.log() in those browser will cause an error. So the first solution in this post that test for both console and console.log is a better check.

 

In a way it's really cool that javscript allows you to overwrite ANY namespace

How about a wrapper for it, like

var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function(what) {
        if (!C.debug) return false;
        if (typeof console == 'object' && typeof console.log != "undefined") {
            console.log(what);
        }
        else {
            if (!C.quietDismiss) alert(what);
        }
    }
} // end console wrapper.

C.log("foo");

PHP:

 

actually i find this inadequate. sometimes, I'd console.log more than 1 parameter, like:

console.log("vars", var, var2, ... );

the above takes vars only and drops remaining params.

so i changed it to:

<img id="divImage" src="http://forums.digitalpoint.com/images/misc/dps_logo.gif" style="position: absolute; left: 10px; top: 10px;" />
<script type="text/javascript">
window.addEvent("domready", function() {

var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function() {
        if (!C.debug) return false;
        if (typeof console == 'object' && typeof console.log != "undefined") {
            for (var i = 0, l = arguments.length; i < l; i++)
                console.log(arguments[i]);
        }
        else {
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";
                alert(result);
            }
        }
    }
} // end console wrapper.

var bar = document.getElementById("divImage");
C.log("foo", bar);

// compare with:
console.log("foo", bar);
});
</script>

PHP:

which correctly outputs...
pass 1 (wrapper):
foo
<img id="divImage" style="position: absolute; left: 10px; top: 10px;" src="http://forums.digitalpoint.com/images/misc/dps_logo.gif">

pass 2 (native):
foo <img id="divImage" style="position: absolute; left: 10px; top: 10px;" src="http://forums.digitalpoint.com/images/misc/dps_logo.gif">

so, almost identical here except for the new line (preserving functionality of original when console there).

the IE version, on the other hand, will output:

foo (string) [object] (object) - i know it can be improved anyway - but there is a firebug lite for IE and other browsers, let's not try to do that from scratch...
i'll add this to my blog for future reference