Best practices on use of console

[paulirish]

I'm thinking we could add this for users.

• Don't wrap it in an abstraction.
• Shim it
  • Since IE7 is dead I don't think it's necessary anymore. Unless you're using methods in production that other browsers will throw exceptions on. Unclear which these are just yet.
• Remove console statements before shipping to production
  • Ya know, unless you want them.

[fflorent]

Hi Paul,

Since IE7 is dead I don't think it's necessary anymore.

It is dying but not dead (unfortunately). And there are still developers who develop for it (that's my case for example). So when necessary, it can be useful to create a "empty" console object and populate it with no-operation methods when necessary. Basically:

// Creates a console object when the browser does not provide the Console API
// and populates the console object with an empty function when the API is not complete.
(function() {
    var methods = ["log", "info", "debug", "profile"/*, ... */];
    if (!window.console)
        window.console = {};
    var noop = function(){ };
    for (var i = 0; i < methods.length; i++) {
        var method = methods[i];
        if (!console[method])
            console[method] = noop;
    }
})();

Remove console statements before shipping to production

Sure!

Florent

[jonathansampson]

Important to note also that the follow evaluates to true in all versions of IE prior to 10:

"undefined" === typeof console

Once the console has been opened (attached), the condition will evaluate to false. The condition is false in IE10+ whether the developer tools (primarily the console) have been opened or not.

[bkardell]

+1 @jonathansampson - it's actually noted as noted in goals already https://github.com/DeveloperToolsWG/console-object#goals - but I think it should go in a best-practices piece along with the above and a link to a polyfill or at least 'non-breaking api' like above.

Best version of @fflorent's example in full seems to be https://github.com/h5bp/html5-boilerplate/blob/master/js/plugins.js