将多个参数传递给console.log

Question

我有一个实用函数，它使用条件包装了console.log，因此只有在开发环境下且console.log存在时才会调用console.log：

我有一个实用函数，它使用条件包装了console.log，因此只有在开发环境下且console.log存在时才会调用console.log：

/* 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);
        }
    };
}());

这对于普通的控制台日志非常有效。但我最近发现了将多个参数传递给console.log的乐趣：它允许您在控制台日志前面加上一个字符串，因此console.log('DEBUG', object)会输出该字符串以及一个可展开的对象，您可以检查其属性。 我如何更改我的conlog函数才能做到这一点？我已尝试这样记录所有参数：

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

但是这将参数输出为一个数组，而不是使用console.log获得的整洁行。您可以在此屏幕截图中看到差异：

有人能告诉我如何复制原始的日志输出吗？

- And Finally

Answer 1

当然你可以做到，这个链接提供了一个演示如何实现你需要的功能，并且增加了额外的选项。

下面是代码：

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);

- Idham Perdameian

---

有没有解决方案可以同时应用颜色和记录所有参数？ - Nicholas

很好！感谢包含演示链接！ :) - aztlan2k

Answer 2

尝试像这样做：

试试像这样

/* 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);
        }
    };
}());

其中message类似于“DEBUG”，object是您想要检查的任何对象。

如果您想能够将任意数量的参数传递给console.log，我建议使用arguments变量。

/* 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);
            }
        };
    }());

如我在评论中提到的，我不确定哪些浏览器完全支持此功能（你知道我在说谁）。

我已经测试并确认它可以在当前版本的Chrome、FireFox和Safari中工作。

- Justin Wood

---

谢谢Justin - 但是如果我像真正的控制台日志一样传递metro.conlog('foo')和metro.conlog('foo', myObject, anotherObject, 'bar')，这个解决方案是否可行？ - And Finally

如果你想这样使用，你可以直接使用 console.log(arguments);，它会输出你传递给函数的所有参数。我不确定它在浏览器兼容性方面的表现如何。我知道它可以在Chrome、Firefox和Safari中工作。我会对我的答案进行编辑。 - Justin Wood

你想要使用 console.log.apply(console, arguments)。 - hagbard

Justin，我确实尝试过 console.log(arguments)，但它没有给我与正常的 console.log 相同的结果。hagbard，这正是我需要的答案，谢谢你！你想把它作为一个答案发表吗？ - And Finally