扩展console.log而不影响日志行

Question

我想扩展'console.log'函数以向其输出添加其他信息 - 但我不想影响浏览器在控制台窗口中生成的脚本名称/行号信息.看看如果我创建自己的实现,我得到无用的跟踪信息,我是否应该找到代码区域...(它们都链接到日志实现,而不是导致日志消息的实际脚本)

基本上,我的应用程序是一个非常可插拔的基础架构,任何日志输出都可能出现在任意数量的帧中.因此,我希望每条日志消息都在日志​​消息的开头包含一个特殊的唯一标识符.

我试过用自己的方法替换console.log方法,但是chrome抱怨 Uncaught TypeError: Illegal invocation

这就是我覆盖它的方式

var orig = console.log;
console.log = function( message )
{
    orig( (window == top ? '[root]' : '[' + window.name + ']') + ': ' + message );
}

有任何想法吗？

[编辑]注意:修复"非法调用"问题后,覆盖文件中的文件名/编号仍然被"污染"...

[编辑]看起来一般的答案是 - 不 - 尽管有一些令人困惑的鹅追逐,但在当前版本的浏览器中无法实现所需的功能.

Answer 1

是的,可以添加信息而不会弄乱日志调用的原始行号.这里的一些其他答案很接近,但诀窍是让您的自定义日志记录方法返回修改后的记录器.下面是一个简单的示例,仅使用上下文变体进行了适度测试.

log = function() {
    var context = "My Descriptive Logger Prefix:";
    return Function.prototype.bind.call(console.log, console, context);
}();

这可以用于:

log("A log message..."); 

这是一个jsfiddle:http://jsfiddle.net/qprro98v/

可以轻松获得创意并传递上下文变量,并从函数定义中删除自动执行的parens.即log("DEBUG:")("调试消息"),log("INFO:")("这是一些信息")等.

关于函数的唯一真正导入部分(关于行号)是它返回记录器.

Answer 2

如果您的用例可以处理一些限制,那么有一种方法可以使其工作.限制是:

• 额外的日志内容必须在绑定时计算; 它不能是时间敏感的,或者以任何方式依赖于传入的日志消息.

• 额外的日志内容只能放在日志消息的开头.

有了这些限制,以下内容可能对您有用:

var context = "ALIASED LOG:"
var logalias;

if (console.log.bind === 'undefined') { // IE < 10
    logalias = Function.prototype.bind.call(console.log, console, context);
}
else {
    logalias = console.log.bind(console, context);
}

logalias('Hello, world!');

http://jsfiddle.net/Wk2mf/

Answer 3

实际上至少可以使用铬.这是最相关的.这可能会因设置而异,我获得分组的方法只是记录整个堆栈,并找到我需要的信息.

        var stack = new Error().stack;
        var file = stack.split("\n")[2].split("/")[4].split("?")[0]
        var line = stack.split("\n")[2].split(":")[5];

这是整个事情,保留本机对象日志记录.

var orig = console.log
console.log = function(input) {
    var isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
    if(isChrome){
        var stack = new Error().stack;
        var file = stack.split("\n")[2].split("/")[4].split("?")[0]
        var line = stack.split("\n")[2].split(":")[5];
        var append = file + ":" + line;
    }
    orig.apply(console, [input, append])
}

Answer 4

一个可接受的解决方案可以是创建自己的日志函数，该console.log函数返回一个与日志参数绑定的函数。

log = function() {
    // Put your extension code here
    var args = Array.prototype.slice.call(arguments);		
    args.unshift(console);
    return Function.prototype.bind.apply(console.log, args);
}

// Note the extra () to call the original console.log
log("Foo", {bar: 1})();

这样，console.log呼叫将从正确的线路进行，并将在控制台中很好地显示，允许您单击它和所有内容。

Answer 5

您需要console.log使用正确的上下文来调用 ( console)：

orig.call(console, message);

要完成允许多个参数的函数：

var orig = console.log;
console.log = function() {
    var msgs = [],
        prefix = (window== top ? '[root]' : '[' + window.name + ']');
    while(arguments.length) {
        msgs.push(prefix + ': ' + [].shift.call(arguments));
    }
    orig.apply(console, msgs);
};

演示： http: //jsfiddle.net/je2wR/

请记住，使用+号将对象与字符串组合时，您会丢失控制台中的内置对象/数组浏览器。