Passing multiple arguments to console.log

Question

I have a utility function that wraps console.log with a condition, so we only call console.log if we're in the dev environment and console.log exists:

/* Console log if environment has debug true or #debug initially passed in URL */
metro.conlog = (function () {
    return function (message) {
        if ((metro.siteData.debug || metro.hashOptions.hasOwnProperty('debug')) && window.console && message) {
            console.log(message);
        }
    };
}());

This has worked very well for normal console logs. But I've recently discovered the joys of passing more than one argument to console.log: it allows you to prefix a console log with a string, so console.log('DEBUG', object) outputs the string plus an expandable object whose properties you can inspect. How can I change my conlog function to do this? I've tried logging out all arguments like this:

metro.conlog = (function () {
    return function (message) {
        if ((metro.siteData.debug || metro.hashOptions.hasOwnProperty('debug')) && window.console && message) {
            console.log(arguments);
        }
    };
}());

But this outputs the arguments as an array, instead of the neat line you get with console.log. You can see the difference in this screenshot:

enter image description here

Can anybody tell me how I can reproduce the original log output?

pashute · Accepted Answer · 2016-11-08 19:03:14Z

42

Of course you can do it, this is a demo of how to do exactly what you need, with extra options added.

And the code is below:

var mylog = (function () {
    return {
        log: function() {
            var args = Array.prototype.slice.call(arguments);
            console.log.apply(console, args);
        },
        warn: function() {
            var args = Array.prototype.slice.call(arguments);
            console.warn.apply(console, args);
        },
        error: function() {
            var args = Array.prototype.slice.call(arguments);
            console.error.apply(console, args);
        }
    }
}());

var name = "Alex";
var arr = [1, 2, 3];
var obj = { a:1, b:2, c:3 };
var hello = function(msg){alert(msg);};
mylog.log("Name: ", name);
mylog.log("Window Debug: ", window);
mylog.error("Some error happened");
mylog.warn("Ahh... Warning", arr, obj);
mylog.log("more parameters: ", arr, obj, hello);

edited Nov 8, 2016 at 19:03

pashute

4,0534 gold badges43 silver badges68 bronze badges

answered Sep 16, 2014 at 11:16

Idham Perdameian

2,27725 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicholas Over a year ago

Is there any solution for this to apply colors as well as logging all the arguments?

aztlan2k Over a year ago

nice! appreciated the inclusion of the demo link! :)

Justin Wood · Accepted Answer · 2013-09-13 14:46:15Z

1

Try something like this

/* Console log if environment has debug true or #debug initially passed in URL */
metro.conlog = (function () {
    return function (message, object) {
        if ((metro.siteData.debug || metro.hashOptions.hasOwnProperty('debug')) && window.console && message) {
            console.log(message, object);
        }
    };
}());

where message is something like "DEBUG" and object is whatever object you want to examine.

If you want to be able to pass an arbitrary number of arguments into console.log, I would suggest using the arguments variable.

/* Console log if environment has debug true or #debug initially passed in URL */
    metro.conlog = (function () {
        return function (message, object) {
            if ((metro.siteData.debug || metro.hashOptions.hasOwnProperty('debug')) && window.console && message) {
                console.log(arguments);
            }
        };
    }());

As mentioned in my comments, I am unsure which browsers fully support this (I'm looking at you IE).

I have tested and confirmed that it works in current Chrome, FireFox and Safari.

edited Sep 13, 2013 at 14:46

answered Sep 11, 2013 at 16:32

Justin Wood

10.1k2 gold badges35 silver badges48 bronze badges

4 Comments

And Finally Over a year ago

Thanks Justin - but would this solution work if I passed metro.conlog('foo') and metro.conlog('foo', myObject, anotherObject, 'bar'), as I can do with the real console log?

Justin Wood Over a year ago

If you want to use it like that. you can just use console.log(arguments); and that will place all arguments that you gave your function. I am unsure on the browser compatibility for that. I know it works in chrome, firefox and safari. I will make an edit to my answer.

hagbard Over a year ago

you want to use console.log.apply(console, arguments)

And Finally Over a year ago

Justin, I did try console.log(arguments), but it didn't give me the same results as the normal console.log. hagbard, that's exactly the answer I needed, thank you! You wanna post it as an answer?

Collectives™ on Stack Overflow

Passing multiple arguments to console.log

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related