Making the console a little more convenient.

Almost all Javascript programmers use the console in browsers. The console is built into Chrome, Opera, IE and is installed with Firebug in Fox.
But she has a couple of inconveniences that can be fixed very easily. It:

• Errors when the console is not defined
• Inability to use out of context
• Inability to disable during production
• necrossbrowser

Fix these problems easily and quickly!



First of all, we need to replace the console object with our object. Save original console in original variable

 (function () { var global = this; var original = global.console; //   var console = global.console = {}; })(); 

')
Now you need to implement all the methods of the original console, if any:

 (function () { var global = this; var original = global.console; var console = global.console = {}; //   var methods = ['assert', 'count', 'debug', 'dir', 'dirxml', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'trace', 'warn']; //        for (var i = methods.length; i--;) { //  ,     , //          'assert' (function (methodName) { //    console[methodName] = function () { //         if (original && methodName in original) { //     original[methodName].apply(original, arguments); } }; })(methods[i]); } })(); 

Thus, we not only got rid of errors in case of an undefined console, but also solved the second problem - the ability to use the console away from the context, for example:

 //    console.log $('#my-element').click(console.log); //   var log = console.log; for (var i = 0; i < 10; i++) log(i); 

Without our redefinition, in the first, in the second case, we would get the error " Illegal invocation ".

The next thing we need to do is add the ability to disable debugging during production. This is done in two lines:

 (function () { // .. var console = global.console = {}; console.production = false; // ... console[methodName] = function () { //               if (original && methodName in original && !console.production) { //     original[methodName].apply(original, arguments); // .. })(); 

Now, to disable debugging information, it is enough to call the following code somewhere during the initialization of our application:

 console.production = true; 

Browser Features

Shit

IE 8 and IE 9 as always distinguished. If you call the following code:

 alert(typeof console.log); 

That normal browsers will display "function", and a donkey - "object". object no apply method, so the easiest way to get around this bug is to call a method from a function prototype. A little bit of magic:

 original[methodName].apply(original, arguments); //  : Function.prototype.apply.call(original[methodName], original, arguments); 

Firebug

Firebug does not allow you to override the standard variable . Therefore, it is solved by a very simple fix. Before assignment, you must delete the property:

  var original = global.console; var console = global.console = {}; // => var original = global.console; delete global.console; var console = global.console = {}; 

Add new methods

Many people know that in the most progressive browsers there are no methods time and timeEnd. Porting them from Firebug:

  // ... var original = global.console; var console = global.console = {}; if (original && !original.time) { original.time = function(name, reset){ if (!name) return; var time = new Date().getTime(); if (!console.timeCounters) console.timeCounters = {}; var key = "KEY" + name.toString(); if(!reset && console.timeCounters[key]) return; console.timeCounters[key] = time; }; original.timeEnd = function(name){ var time = new Date().getTime(); if(!console.timeCounters) return; var key = "KEY" + name.toString(); var timeCounter = console.timeCounters[key]; if (timeCounter) { var diff = time - timeCounter; var label = name + ": " + diff + "ms"; console.info(label); delete console.timeCounters[key]; } return diff; }; } //   var methods = // ... 

Now even donkeys have learned to count time.

The final code we got is as follows:

 (function () { var global = this; var original = global.console; if ('console' in global) delete global.console; var console = global.console = {}; console.production = false; if (original && !original.time) { original.time = function(name, reset){ if (!name) return; var time = new Date().getTime(); if (!console.timeCounters) console.timeCounters = {}; var key = "KEY" + name.toString(); if(!reset && console.timeCounters[key]) return; console.timeCounters[key] = time; }; original.timeEnd = function(name){ var time = new Date().getTime(); if(!console.timeCounters) return; var key = "KEY" + name.toString(); var timeCounter = console.timeCounters[key]; if (timeCounter) { var diff = time - timeCounter; var label = name + ": " + diff + "ms"; console.info(label); delete console.timeCounters[key]; } return diff; }; } var methods = ['assert', 'count', 'debug', 'dir', 'dirxml', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'trace', 'warn']; for (var i = methods.length; i--;) { (function (methodName) { console[methodName] = function () { if (original && methodName in original && !console.production) { Function.prototype.apply.call(original[methodName], original, arguments); } }; })(methods[i]); } })(); 

Now the console does not cause errors, it can be used out of context, turned off on the battle server and read the time in IE)

Use on health, the license for a code - LGPL / MIT, the license for the text - CC BY 3.0

Github: github.com/theshock/console-cap