javascript - Javascript - 覆盖 console.log 并保留旧功能

Question

我想覆盖 console.log 并在我的新函数上调用它。

我尝试这样的事情，但我得到Uncaught TypeError: Illegal invocation：

console.log = function() {
  this.apply(window, arguments);
}.bind(console.log);

console.log('as');

这是我的目标：

console.error(exception);应该做：

console.error = function() {
  if (typeof exception.stack !== 'undefined') {
    console.error(exception.stack);
  } else {
    console.error.apply(windows, arguments);
  }
}.bind(console.error);

console.error('as');
console.error({stack: 'my stack....'});

编辑：实际上，它适用于 Firefox 而不是 Chrome ...... 这是 Chrome 中的一个错误：https ://code.google.com/p/chromium/issues/detail?id=167911

score 8 · Accepted Answer

你可以有这样的东西：

console.error = (function() {
    var error = console.error;

    return function(exception) {
        if (typeof exception.stack !== 'undefined') {
            error.call(console, exception.stack);
        } else {
            error.apply(console, arguments);
        }
    }
})();

score 7 · Accepted Answer

实现您想要的最佳方式：

// define a new console
var console=(function(oldCons){
    return {
        log: function(text){
            oldCons.log(text);
            // Your code
        },
        info: function (text) {
            oldCons.info(text);
            // Your code
        },
        warn: function (text) {
            oldCons.warn(text);
            // Your code
        },
        error: function (text) {
            oldCons.error(text);
            // Your code
        }
    };
}(window.console));

//Then redefine the old console
window.console = console;

score 2 · Accepted Answer

感谢并受到@Ludovic Feltz 回答的启发，我找到了一个带有自定义样式的控制台的封装替代方案。

尽管这个答案与原始问题的关系不大，正如 Ludovic 在上面的评论中所建议的那样，我在这里发布它是为了帮助那些也打算用首选样式自定义/覆盖控制台的人:)

注意：单击下面的“运行代码片段”后，您可能需要打开浏览器控制台（默认按 F12）才能看到结果。

window.msg = (function (defaultConsole) {
  return Object.assign({}, defaultConsole, {
    log(text) {
      defaultConsole.log("%cLOG: %c" + text,
        "background-color: #fff; color: #5CB85C; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #5CB85C; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    info(text) {
      defaultConsole.info("%cINFO: %c" + text,
        "background-color: #fff; color: #337AB7; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #337AB7; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    warn(text) {
      defaultConsole.warn("%cWARN: %c" + text,
        "background-color: #fff; color: #F0AD4E; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #F0AD4E; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    error(text) {
      defaultConsole.error("%cERROR: %c" + text,
        "background-color: #fff; color: #D9534F; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #D9534F; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    }
  })
}(window.console));

msg.log('Log Message !');
msg.info('Info Message !');
msg.warn('Warn Message !');
msg.error('Error Message !');
msg.debug('Debug Message !');
msg.dir('Dir Message !');

/*Note: 1).If we assign the above to console instead of msg, the default console.log, console.info, etc would be overridden with custom styles;
        2).The above methods have utilized some ES6 features which may not be compatiable with old browsers, check below for ES5 version;
*/

//The ES5 Version
window.msg2 = (function (defaultConsole) {
  //The for loop within default console is to inherit all methods from it so that the uncustomized methods like msg2.debug(), msg2.dir(), etc won't throw errors;
  for (var key in defaultConsole) {
    this[key] = defaultConsole[key];
  }
  this.log = function (text) {
    defaultConsole.log("%cLOG: %c" + text,
      "background-color: #fff; color: #5cb85c; font-weight: bold; padding-left: 8px; font-size: 1.2em",
      "background-color: #5cb85c; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
  };
  this.info = function (text) {
    defaultConsole.info("%cINFO: %c" + text,
      "background-color: #fff; color: #337ab7; font-weight: bold; padding-left: 8px; font-size: 1.2em",
      "background-color: #337ab7; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
  };
  this.warn = function (text) {
    defaultConsole.warn("%cWARN: %c" + text,
      "background-color: #fff; color: #f0ad4e; font-weight: bold; padding-left: 8px; font-size: 1.2em",
      "background-color: #f0ad4e; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
  };
  this.error = function (text) {
    defaultConsole.error("%cERROR: %c" + text,
      "background-color: #fff; color: #d9534f; font-weight: bold; padding-left: 8px; font-size: 1.2em",
      "background-color: #d9534f; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
  }
  return this;
}(window.console));

msg2.log('Log Message !');
msg2.info('Info Message !');
msg2.warn('Warn Message !');
msg2.error('Error Message !');
msg2.debug('Debug Message !');
msg2.dir('Dir Message !');


//My Original Answer is as below, which seemed simpler and more readable, however, the uncustomized methods like msg3.debug(), msg3.dir(), etc would throw errors such as 'msg3.debug is not a function';
window.msg3 = (function (defaultConsole) {
  return {
    log: function (text) {
      defaultConsole.log("%cLOG: %c" + text,
        "background-color: #fff; color: #5CB85C; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #5CB85C; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    info: function (text) {
      defaultConsole.info("%cINFO: %c" + text,
        "background-color: #fff; color: #337AB7; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #337AB7; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    warn: function (text) {
      defaultConsole.warn("%cWARN: %c" + text,
        "background-color: #fff; color: #F0AD4E; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #F0AD4E; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    },
    error: function (text) {
      defaultConsole.error("%cERROR: %c" + text,
        "background-color: #fff; color: #D9534F; font-weight: bold; padding-left: 8px; font-size: 1.2em",
        "background-color: #D9534F; color: #fff; font-weight: bold; padding: 0 8px; font-size: 1.2em");
    }
  };
}(window.console));
msg3.log('Log Message !');
msg3.info('Info Message !');
msg3.warn('Warn Message !');
msg3.error('Error Message !');
msg3.debug('Debug Message !');
msg3.dir('Dir Message !');

score 1 · Accepted Answer

您正在对象console.log上调用该函数window。您应该改为在console对象上调用它。

console.log = function() {
  this.apply(console, arguments);
}.bind(console.log);

console.log('as');

score 1 · Accepted Answer

尝试这个：

var console={
    log: function(v){
        alert(v);
    }
};
console.log('hello world');

升级版：

检查这个：

var originalConsole={
    log: (function(c){
        return function(v){
            c.log(v);
        };
    }(window.console))
};
var console={
    log: function(v){
        originalConsole.log('_original_');
        originalConsole.log(v);
    }
};
console.log('hello world');

originalConsole存储原始对象所需的方法console（仅log在我的示例中），然后console被新对象覆盖。

UPD2

var console=(function(c){
    return {
        log: function(v){
            c.log('_original_');
            c.log(v);
        }
    };
}(window.console));
console.log('hello world');

我希望这能帮到您。

score 0 · Accepted Answer

我建议使用：https ://github.com/sunnykgupta/jsLogger

特征：

它安全地覆盖了 console.log。
如果控制台不可用，请注意（哦，是的，您也需要考虑这一点。）
存储所有日志（即使它们被抑制）以供以后检索。
处理主要的控制台功能，如log, warn, error, info.

对修改开放，每当有新建议出现时都会更新。

免责声明：我是插件的作者。

score 0 · Accepted Answer

只是增强@Ludovic 先前的答案以使他的答案也支持nodejs：

// define a new console
var console=(function(oldCons){
    return {
        log: function(text){
            oldCons.log(text);
            // Your code
        },
        info: function (text) {
            oldCons.info(text);
            // Your code
        },
        warn: function (text) {
            oldCons.warn(text);
            // Your code
        },
        error: function (text) {
            oldCons.error(text);
            // Your code
        }
    };
}(global.console !== undefined ? global.console : window.console));

score 0 · Accepted Answer

一点...console.log可以接收多个参数，例如：

console.log('results', result1, result2, result3);

如果你想要这种行为，你可以这样做：

console.log = function(){
    var args = Array.from(arguments).join(' ');
    ...
}

javascript - Javascript - 覆盖 console.log 并保留旧功能

8 回答 8

Related

Reference