将所有控制台输出 [日志、错误、警告等] 代理到 HTML

Question

我正在寻找一种解决方案，将我在控制台中看到的内容打印到 HTML 中的 div 元素中。 我正在将 Web 技术开发成电视，因此没有提供浏览器工具。 我找到了这个解决方案：

(function () {
    if (!console) {
        console = {};
    }
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += 'LOG: ' + (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += 'LOG: ' + message + '<br />';
        }
    }
    console.error = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += 'ERROR: ' + (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += 'ERROR: ' + message + '<br />';
        }
    }
    console.warn = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += 'WARN: ' + (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += 'WARN: ' + message + '<br />';
        }
    }
})();

但我需要一个更强大的解决方案来打印控制台的所有内容，而不仅仅是通过这三个函数传递的内容。 这可以通过 ES5 JavaScript 实现吗？

Answer 1

您可以使用 lodash 函数 _.functions 并包装所有 console.methods

_.functions(console).forEach(function (methodName) {
var oldMethodName = console[methodName];
console[methodName] = function (message) {
    if (typeof message == 'object') {
        logger.innerHTML += methodName + ' : ' + (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
    } else {
        logger.innerHTML += methodName + ' : ' + message + '<br />';
    }
    return oldMethodName.call(console, arguments)
}
})

我还建议将onError 侦听器添加到窗口并重新定义setTimeout 以从中获取错误。