在页面内的div中显示控制台错误和警报

Question

我正在为我的网络应用程序构建调试工具,我需要在div中显示控制台错误.我知道我可以使用我自己制作的控制台,如对象并使用它,但为了将来使用,我需要将所有控制台错误发送到窗口.其实我想抓住控制台事件.

Answer 1

保持控制台正常工作:

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

Answer 2

这是一种使用闭包的方式,包含新控制台日志功能的新控制台日志功能.

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")));

Answer 3

另外,如果你是在保持关注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不兼容.

Answer 4

简单的事情怎么样:

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

Answer 5

这里没有任何答案考虑通过多个参数传递的控制台消息.例如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).