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

Question

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

(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 以从中获取错误。