Overriding The Console Functions

The console functions are the most common functions that developers can use when developing and debugging a web application using JavaScript. Actually, the `console.log` function is the one to use when trying to find an annoying bug. Yet, the console object includes other functions that can help us to trace and debug operations in our applications.

The `console.warn` function can be used when we want to show a message in the console, just like the `console.log` function but with a warning sign next to it.

The `console.error` can be used to console an object with a message (in a red color), along with the message we get the stack trace, showing us where the error came from.

Other cool functions are the `console.time` and `console.timeEnd`. These functions allow us to measure a time frame between operations in order to find and make our algorithm more efficient.

You can explore the `console` object in order to find out about more cool functions inside.

In this post I will talk about how to override the console functions and preserved the original functionality. You asking why? Well, I'm glad you asked... :)

I'm currently working on a system that combines web and mobile clients, I will not go into details, but think about having a web application on a mobile device and you want to trace all the console.log's that comes from it, we all know that we can enable the console messages (known as 'developer mode') on the mobile side, however, it will be a bit annoying to read those messages on the mobile side. So, my goal is to catch every `console.log` call, send it to my Node.js/Socket.io server and transmit it to my desktop web application.
The simple way to achieve this task is to simply override the `console.log` function like so:

console.log = function() {
    //send data to server...
}

When using this process, I can send the data to my server every time `console.log` is called on the mobile web application. But what if I want to preserve the original action of the `console.log` function? I don't want to destroy the real function, just to add some functionality into it.

This is the correct way to override and preserve the `console.log` functionality:

(function(){
    //saving the original console.log function
    var preservedConsoleLog = console.log;

    //overriding console.log function
    console.log = function() {

        //we can't just call to `preservedConsoleLog` function,
        //that will throw an error (TypeError: Illegal invocation)
        //because we need the function to be inside the
        //scope of the `console` object so we going to use the
        //`apply` function
        preservedConsoleLog.apply(console, arguments);

        //and lastly, my addition to the `console.log` function
        if(application.socket){
            application.socket.emit('console.log', arguments);
        }
    }
})();

Now you can take any function of the `console` object and override it in this way, add your functionality and achieve what you want.