在 Chrome 中拦截对 console.log 的调用

Question

我有一个无法更改的脚本，它会产生很多console.log 调用。如果调用包含某些字符串，我想添加另一层并做出响应。这适用于 Firefox，但在第 4 行的 Chrome 中会引发“Illegal invocation”错误：

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

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

Answer 1

您需要在console 的上下文中调用console.log for chrome：

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

---

现代语言功能可以显着简化这个 sn-p：

{
  const log = console.log.bind(console)
  console.log = (...args) => {
    log('My Console!!!')
    log(...args)
  }
}

Answer 2

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

您可以像这样重新定义控制台（以及所有浏览器）的每个功能的行为：

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

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

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

Answer 4

使用 ES6 新的扩展运算符你可以这样写

(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 看起来 console 只有方法，但最好确定一下。

• *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);
};