How can I hijack calls to the browsers console.log and send them to my own log function while still letting them make there normal console.log entry.

Sites like JSBin and CodePen allow you to view there version of a console log in the page DOM while still making the console.log entry as well.

So every time I call console.log('my log msg'); it should behave like normal but also pipe/send the console log data to my own JavaScript logger.log('log entry') function.

How can this be done?

UPDATE

Desired custom logger output of an object:

Logging this object:

var data = {
  date: new Date(),
  prop2: 'sfgsdgsd',
  arrayProp: ['key1', 'key2', 'key3'],
  arrayOfObjectsProp: [
  {
      date: new Date(),
      date2: new Date()
  },{
      date: new Date(),
      date2: new Date()
  },{
      date: new Date(),
      date2: new Date()
  }]      
};
setInterval(function() {
  console.log(data);
}, 10000);

In the Logger will show as:

{
  "date": "2017-01-01T03:19:46.944Z",
  "prop2": "sfgsdgsd",
  "arrayProp": [
    "key1",
    "key2",
    "key3"
  ],
  "arrayOfObjectsProp": [
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    },
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    },
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    }
  ]
}

How can I hijack calls to the browsers console.log and send them to my own log function while still letting them make there normal console.log entry.

Sites like JSBin and CodePen allow you to view there version of a console log in the page DOM while still making the console.log entry as well.

So every time I call console.log('my log msg'); it should behave like normal but also pipe/send the console log data to my own JavaScript logger.log('log entry') function.

How can this be done?

UPDATE

Desired custom logger output of an object:

Logging this object:

var data = {
  date: new Date(),
  prop2: 'sfgsdgsd',
  arrayProp: ['key1', 'key2', 'key3'],
  arrayOfObjectsProp: [
  {
      date: new Date(),
      date2: new Date()
  },{
      date: new Date(),
      date2: new Date()
  },{
      date: new Date(),
      date2: new Date()
  }]      
};
setInterval(function() {
  console.log(data);
}, 10000);

In the Logger will show as:

{
  "date": "2017-01-01T03:19:46.944Z",
  "prop2": "sfgsdgsd",
  "arrayProp": [
    "key1",
    "key2",
    "key3"
  ],
  "arrayOfObjectsProp": [
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    },
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    },
    {
      "date": "2017-01-01T03:19:46.944Z",
      "date2": "2017-01-01T03:19:46.944Z"
    }
  ]
}

• javascript

2 Answers 2

You could assign old console.log to a variable called, for instance, oldlog, and then assign to console.log your own function, which would do all the necessary things, and then call oldlog in the very end, passing given text as a parameter

var oldlog = console.log
console.log = function(...args) {
  // do something fancy with text passed
  oldlog(...args);
}

EDIT As mentioned by KevBot, console.log can take unlimited number of arguments, so, to cover all the cases, your function should allow this behavior. This can be done using ES6 feature called rest parameters or, without relying on ES6, using arguments array-like object, as described in num8er's answer

Also, as mentioned by Oriol, some browsers wont allow oldlog to be called not on console. This can be fixed by changing the line

oldlog(...args)

in your custom console.log to

oldlog.call(console, ...args)

First of all You must understand that console.log takes dynamic amount of arguments.

So You should not end Your job with: console.log = function(text) {}

You've to get magic variable arguments and then call original log function inside of custom function.

So see this example:

console.log2 = console.log; // keeping original function under new name

console.log = function() {
  // converting arguments object to array
  var args = Array.prototype.splice.call(arguments, 0); 
   
  // calling original log function with args
  console.log2.apply(this, args); 

  // doing something else...      
  document.getElementById('debug-bar').innerHTML = 'Debug: '+ args.join(' ');
};

setInterval(function() {
  console.log(new Date());
}, 1000);

<div id="debug-bar"></div>

P.S. if it's nodejs app so You can use winston package that is very flexible for customizations.