要保持控制台正常工作：

if (typeof console  != "undefined") 
    if (typeof console.log != 'undefined')
        console.olog = console.log;
    else
        console.olog = function() {};

console.log = function(message) {
    console.olog(message);
    $('#debugDiv').append('<p>' + message + '</p>');
};
console.error = console.debug = console.info =  console.log

这是一种使用闭包的方法，在新的范围内包含旧的控制台日志功能。

console.log = (function (old_function, div_log) { 
    return function (text) {
        old_function(text);
        div_log.value += text;
    };
} (console.log.bind(console), document.getElementById("error-log")));

这里的答案都没有考虑传递多个参数的控制台消息。例如console.log("Error:", "error details")）。

替换默认日志函数的函数更好地考虑所有函数参数（例如，通过使用arguments对象）。下面是一个例子：

console.log = function() {
  log.textContent += Array.prototype.slice.call(arguments).join(' ');
}

（Array.prototype.slice.call(...)简单地将arguments对象转换为数组，因此可以轻松地将其与 连接join()。）

当原始日志也应该保持工作时：

console.log = (function (old_log, log) { 
    return function () {
        log.textContent += Array.prototype.slice.call(arguments).join(' ');
        old_log.apply(console, arguments);
    };
} (console.log.bind(console), document.querySelector('#log')));
  

一个完整的解决方案：

var log = document.querySelector('#log');
['log','debug','info','warn','error'].forEach(function (verb) {
    console[verb] = (function (method, verb, log) {
        return function () {
            method.apply(console, arguments);
            var msg = document.createElement('div');
            msg.classList.add(verb);
            msg.textContent = verb + ': ' + Array.prototype.slice.call(arguments).join(' ');
            log.appendChild(msg);
        };
    })(console[verb], verb, log);
});

（发出带有多个参数的消息的框架的一个例子是 Video.js。但肯定还有很多其他的。）

编辑：多个参数的另一个用途是控制台的格式化功能（例如console.log("Status code: %d", code).

关于未显示的错误

（2021 年 12 月更新）

如果任何代码因未捕获的错误而崩溃，则 in 可能不会显示在 div 中。如果可能，一种解决方案是将所有代码包装在一个try块中以捕获此类错误并将它们手动记录到 div。

try {
    // Code that might throw errors...
} catch(err) {
    // Pass the error to the overridden error log handler
    console.error(err);
}

否则，如果您担心保持log，warn并且error彼此分开，您可以做这样的事情（改编自 MST 的回答）：

var log = document.querySelector('#log');

['log','warn','error'].forEach(function (verb) {
    console[verb] = (function (method, verb, log) {
        return function (text) {
            method(text);
            // handle distinguishing between methods any way you'd like
            var msg = document.createElement('code');
            msg.classList.add(verb);
            msg.textContent = verb + ': ' + text;
            log.appendChild(msg);
        };
    })(console[verb].bind(console), verb, log);
});

#log你的 HTML 元素在哪里。变量verb是一个'log'，'warn'或'error'。然后，您可以使用 CSS 以可区分的方式设置文本样式。请注意，此代码中有很多与旧版本的 IE 不兼容。

像这样简单的事情怎么样：

console.log = function(message) {$('#debugDiv').append('<p>' + message + '</p>');};
console.error = console.debug = console.info =  console.log