在页面内的div中显示控制台错误和警报
我正在为我的web应用程序构build一个debugging工具，我需要在div中显示控制台错误。 我知道我可以使用我自己制作的控制台像对象，并使用它，但为了将来的使用，我需要将所有的控制台错误发送到窗口。 其实我想捕捉控制台事件。
保持控制台正常工作：
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 这是一个使用闭包的方法，在新的范围内包含旧的控制台日志function。
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")));
否则，如果你关心的是保持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元素。 variablesverb是'log' ， 'warn'或'error' 。 然后，您可以使用CSS以可区分的方式设置文本的样式。 请注意，这个代码很多与旧版本的IE不兼容。
那如此简单的事情呢？
console.log = function(message) {$('#debugDiv').append('<p>' + message + '</p>');}; console.error = console.debug = console.info = console.log
这里的答案都没有考虑到通过多个parameter passing的控制台消息。 例如console.log("Error:", "error details") ）。
replace默认日志函数的函数更好地考虑所有的函数参数（例如通过使用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')));
完整的解决scheme：
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，但是当然还有很多其他的。）
编辑：多个参数的另一个用途是控制台的格式化function（例如console.log("Status code: %d", code) 。
