在 JavaScript 中覆盖 console.log

Question

我想重写console.log 方法以在调用console.log 时调用一组任务。我参考了其他 Stackoverflow 答案，但这给了我错误：

未捕获的 RangeError：超出最大调用堆栈大小。

这就是我想做的：

backupconsolelog = console.log;

console.log = function(arguments)
{
    //do my tasks;

    backupconsolelog(arguments);
}

更新 1：不知何故成功地覆盖了 console.log，但我现在无法在完成覆盖的同一个 .js 文件中执行 console.log(displaySomethingInConsole)。这以某种方式导致对console.log 的递归调用，并再次给出Uncaught RangeError: Maximum call stack size exceeded.

如何在同一个 .js 文件中使用 console.log()？

更新 2：我有一个 check() 函数，它被覆盖的 console.log 调用。但是，check() 函数内部有一个console.log 调用导致Maximum call stack size exceeded. 错误。

更新 3：又出错了！ :(

未捕获的类型错误：非法调用

var _log = window.console.log;
window.console.log = function () {
_log.apply(this, arguments);
check();
};

_log("aaa");
check() {};

更新 4：Bindingconsole 到 _log，即console.log.bind(console) 清除它。

Answer 1

如果您收到 Maximum call stack size exceeded 错误，这几乎肯定意味着您的函数是 recursively calling itself infinitely。您找到的解决方案以及 RaraituL 显示的解决方案应该可以完美运行。您可能不止一次调用了设置呼叫重定向的代码部分。

// First time:
backupconsolelog = console.log.bind(console);
console.log = function() {
    backupconsolelog.apply(this, arguments);
    /* Do other stuff */
}
// console.log is now redirected correctly

// Second time:
backupconsolelog = console.log;
// Congratulations, you now have infinite recursion

您可以添加一些调试信息（显然，不要使用console.log，而是尝试使用debugger; 来创建自动断点）您可以在其中设置重定向以查看代码的位置和时间调用。

更新

这可能属于评论：您的console.log 重定向函数显然调用了一些名为check 的函数。这个check 函数然后调用console.log，如果你的 函数 - 不是原来的。让check 函数调用原始 实现。

backupconsolelog = console.log.bind(console);

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

function check() {
    // This will call your function above, so don't do it!
    console.log('Foo');

    // Instead call the browser's original implementation:
    backupconsolelog('Foo');
}

更新 2

浏览器的console.log 实现的内部工作可能取决于或可能不取决于为this 引用设置的console。因此，您应该将console.log bound 存储到console，就像在我的代码中一样。

Answer 2

// keep reference to original function
var _log = window.console.log;

// overwrite function
window.console.log = function () {
    _log.apply(this, arguments);
    alert(arguments);
};

console.log("hello world");

Answer 3

在一些问题之后，我设法用winston + express替换了console.log。

我使用winston-sugar，因为它使配置更容易，但任何东西都可以工作。 （当您执行 npm install winston-sugar 时会创建 .config/winston.json） 想要用其他东西替换 console.log 的人可以看看最后 5 行，因为它提供了非常干净的代码。

我认为这是一种非常巧妙的方式，可以将快速登录到文件以及 console.log 中

const morgan = require('morgan');
const winstonLoader = require('winston-sugar');
winstonLoader.config('./config/winston.json');
const log = winstonLoader.getLogger('app');
log.stream = {
  write: function (message, encoding) {
    log.info(message);
  },
};

// Add some lines indicating that the program started to track restarts.
log.info('----------------------------------');
log.info('--');
log.info('-- Starting program');
log.info('--');
log.info('----------------------------------');

console.log = (...args) => log.info(...args);
console.info = (...args) => log.info(...args);
console.warn = (...args) => log.warn(...args);
console.error = (...args) => log.error(...args);
console.debug = (...args) => log.debug(...args);

如果您正在运行 express，则稍后在代码中。

// app.use(morgan('combined')); //replaced with the next line to get morgan logs into the winston logfiles.
app.use(morgan('combined', { stream: log.stream }));

Answer 4

您可能需要将原始方法绑定到控制台：

var old = console.log.bind(console)
console.log = (...args) => {
  // perform task
  alert('test')
  old.apply(null, args)
}

Answer 5

这对我有用。

let originalConsole = Object.assign({}, console);
console.log = (value) => {
    //some cool condition
    if (true) {
        value = "new_log : " + value
    }
    originalConsole.log(value);
};

Answer 6

接受的答案将与提供的结构一起使用，除非您需要在运行的实例上多次“设置”覆盖。如果您有一个实时容器或 lambda 函数，您将面临参数数组自身建立的风险。

[ arg1 ] -> [ [arg1] , arg2 ] -> [ [ [ arg1 ] , arg2] , arg3 ] 

例如：

function x(){
  var log = console.log;
  console.log = function () {
        var args = Array.from(arguments);
        args.push('post fix');
        log.apply(console, args);
    }
}

new x()
console.log(1)
new x()
console.log(2)

OUTPUTS:
1 post fix
2 post fix post fix

解决方案：

确保您是否需要将此功能用作中间件，例如， 您在中间件函数之外维护引用，例如：

var log = console.log;
function x(){
  console.log = function () {
        var args = Array.from(arguments);
        args.push('post fix');
        log.apply(console, args);
    }
}

new x()
console.log(1)
new x()
console.log(2)

OUTPUTS: 
1 post fix
2 post fix

或者更好……

const log = console.log;
function middleWare() {
    console.log = (...args) => {
        log(...args, 'post fix');
    }
}