在页面内的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"))); 

否则,如果你关心的是保持logwarnerror彼此分离,你可以做这样的事情(改编自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)