13

I have the following code:

var myLog = console.log.bind(console, '[DEBUG]');

Which works find when I want to log things prepended with [DEBUG] to the console. Now I want to add a date/time to the log and I tried this:

var myLog = console.log.bind(console, '[DEBUG ' + (new Date) + ']');

Which obviously does not work because it always logs the same time (the time that the .bind was called).

Is there any way (using .bind) to log the current time on each log without having to do this:

var myLog = function(){
    var args = ['[DEBUG ' + (new Date) + ']'];
    for(var i = 0; i < arguments.length; ++i) {
        args.push(arguments[i]);
    }
    return console.log.apply(console, args);
};

?

Because the above method shows me the line that console.log.apply was called and not the line that myLog was called.

Naftali
  • 144,921
  • 39
  • 244
  • 303
  • You could extract the line where it was called from `Error().stack` – copy Aug 23 '13 at 19:28
  • @copy that is what I was already doing... But that does not allow for you to click on it in the console to get to the line in the source file – Naftali Aug 26 '13 at 16:33

2 Answers2

37

Yes. http://jsfiddle.net/SwFJg/6/

var DEBUG = (function(){
    var timestamp = function(){};
    timestamp.toString = function(){
        return "[DEBUG " + (new Date).toLocaleTimeString() + "]";    
    };

    return {
        log: console.log.bind(console, '%s', timestamp)
    }
})();

DEBUG.log("banana", {foo:'bar'}); //[DEBUG 2:43:21 PM] banana Object {foo: "bar"}
console.log("Peppercorn");        //Peppercorn 
DEBUG.log("apple");               //[DEBUG 2:43:21 PM] apple 
DEBUG.log("orange");              //[DEBUG 2:43:21 PM] orange 
setTimeout(function(){
    DEBUG.log("mango");           //[DEBUG 2:43:25 PM] mango 
},3000)

This works because toString is called on timestamp (and, in fact, everything) each time console.log is called.

We overwrite the default toString method, and replace it with a time stamp (obviously you can change the output to whatever you want).

I chose the above pattern because, as others have noted (in SO chat), you can easily extend the DEBUG object to do other things.

...
return {
    log: console.log.bind(console, '%s', timestamp),
    error: console.error.bind(console, '%s', timestamp),
    info: console.info.bind(console, '%s', timestamp),
    warn: console.warn.bind(console, '%s', timestamp),
    group: ...,
    groupEnd: ...,
    groupCollapsed: ... // etc
}
...
Shmiddty
  • 13,847
  • 1
  • 35
  • 52
  • I think you could simplify the code if you just pass an object with a `toString` method directly to the function: `console.log.bind(console, {toString: function() {...}})`. No need to create `DEBUG` or empty functions. Good idea though! – Felix Kling Aug 23 '13 at 19:45
  • 1
    I see, makes sense. At least in Firefox you can enforce the evaluation as a string: http://jsfiddle.net/fkling/SwFJg/4/. Although this is also supported in Chrome, it just shows `Object`. Note that your solution doesn't seem to work in Firefox for me, but if you enforce string evaluation, it does: http://jsfiddle.net/fkling/SwFJg/5/. – Felix Kling Aug 23 '13 at 19:57
  • @FelixKling weird. To be honest, the question isn't completely relevant to FF since it already includes timestamps. It is a little concerning that it prevents anything from being logged though. Is there a way to remove the enforced string evaluation? – Shmiddty Aug 23 '13 at 20:34
  • is there a way to bind more than one function ? what I mean is if I want to log something other than timestamp that would take a variable beside the time stamp not on other line – Taha Daboussi Jun 21 '21 at 12:36
  • `let originalLog = console.log; console.log = (...args)=>{ originalLog(dayjs().format("[[]DD/MM/YYYY HH:mm:ss]"),...args); } ` Just copy paste this (it's using dayjs for the format). – OOM Nov 21 '22 at 16:32
2

I think this is what you are looking for, which is simple

console.logCopy = console.debug.bind(console);

console.debug = function(data)
{
    var currentDate = '[' + new Date().toUTCString() + '] ';
    this.logCopy(currentDate, data);
};