Question

我有一个我无法更改的脚本，它会调用很多console.log。我想添加另一个图层并在调用包含某些字符串时进行响应。这适用于FF，但会引发非法调用＆＃34;第4行Chrome中的错误：

var oldConsole = {};
oldConsole.log = console.log;
console.log = function (arg) {
    oldConsole.log('MY CONSOLE!!');
    oldConsole.log(arg);
}

任何想法如何解决这个问题？我也试过克隆控制台...

Answer 1

您需要在console.log的上下文中致电console获取chrome：

(function () {
  var log = console.log;
  console.log = function () {
    log.call(this, 'My Console!!!');
    log.apply(this, Array.prototype.slice.call(arguments));
  };
}());

Answer 2

您也可以使用相同的逻辑，但是从控制台对象中调用它以使上下文相同。

if(window.console){
  console.yo = console.log;
  console.log = function(str){
    console.yo('MY CONSOLE!!');
    console.yo(str);
  }
}

Answer 3

我知道这是一篇旧帖子，但无论如何它都很有用，因为其他解决方案与旧浏览器不兼容。

您可以重新定义控制台每个功能的行为（对于所有浏览器），如下所示：

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

Answer 4

使用ES6 new spread运算符，您可以像这样编写

(function () {
  var log = console.log;
  console.log = function () {
    log.call(this, 'My Console!!!', ...arguments);
  };
}());

Answer 5

可以很简单：

console.log = (m) => terminal.innerHTML = JSON.stringify(m)

#terminal {background: black; color:chartreuse}

$ > <span id="terminal"></span>
<hr>        
<button onclick="console.log('Hello world!!')">3V3L</button>
<button onclick="console.log(document)">3V3L</button>
<button onclick="console.log(Math.PI)">3V3L</button>

Answer 6

由于我（还）不能评论@ludovic-feltz 的答案，这里是他的答案更正以允许在控制台中进行字符串插值：

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

Answer 7

要完全拦截控制台，我们可以覆盖每个方法：

const bindConsole=function(onMessage){
    Object.keys(console)
    .filter(type=>typeof(console[type])==='function')// *1
    .forEach(type=>{
        let _old=console[type];
        console[type] = function (...args) {
            _old.apply(console,args);
            onMessage(type,args);// *2
        };
    });
};

对于旧浏览器：

var bindOldConsole=function(onMessage){
    for(var k in console){// *1
        if(typeof(console[k])=='function')(function(type){
            var _old=console[type];
            console[type] = function () {
                _old.apply(console,arguments);
                onMessage(type,arguments);
            };
        })(k);
    }
};

*1 看起来控制台只有方法，但最好确定一下。
*2 您可以通过将此行替换为：
来阻止从 onMessage 循环调用控制台

if(!isCyclic())onMessage(type,args);

// es6. Not sure concerning old browsers :(
const isCyclic=function (){
    let erst=(new Error()).stack.split('\n');
    return erst.includes(erst[1],2);
};

截取Chrome中对console.log的调用

7 个答案: