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

Question

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

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

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

Answer 1

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

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

---

现代语言功能可以显着简化此代码段：

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

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