在 JavaScript 中覆盖 console.log

Question

我想覆盖 console.log 方法以在调用 console.log 时调用一组任务。我提到了其他 Whosebug 的答案，但这给了我错误：

Uncaught RangeError: Maximum call stack size exceeded.

这就是我想要做的：

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：再次出错！ :(

Uncaught TypeError: Illegal invocation

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

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

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

Answer 1

// 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 2

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

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

Answer 3

如果您收到 超出最大调用堆栈大小 错误，这几乎肯定意味着您的函数是 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 4

在遇到一些问题后，我设法 console.log 替换为 winston + express 来工作。

我使用 winston-sugar，因为它使配置更容易，但任何东西都应该有效。（.config/winston.json 是在执行 npm install winston-sugar 时创建的）想要用其他东西替换 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 5

这对我有用。

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

Answer 6

接受的答案将适用于提供的结构，除非您需要在运行ning 实例上多次“设置”覆盖。如果您有实时容器或 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');
    }
}

在 JavaScript 中覆盖 console.log

Override console.log in JavaScript

javascript

overriding

console.log