Showing console errors and alerts in a div inside the page

Question

I\'m building a debugging tool for my web app and I need to show console errors in a div. I know I can use my own made console like object and use it, but for future use I n

Answer 1

None of the answers here consider console messages that get passed multiple parameters. E.g. console.log("Error:", "error details")).

The function that replaces the default log function better regards all function arguments (e.g. by using the arguments object). Here is an example:

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

(The Array.prototype.slice.call(...) simply converts the arguments object to an array, so it can be concatenated easily with join().)

When the original log should be kept working as well:

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

A complete solution:

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

(An example of a framework that emits messages with multiple parameters is Video.js. But there is certainly many others.)

Edit: Another use of multiple parameters is the formatting capabilities of the console (e.g. console.log("Status code: %d", code).