Showing Console Errors And Alerts In A Div Inside The Page

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 need to s

Solution 1:

To keep the console working:

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

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

Solution 2:

Here's a way using closure, containing the old console log function in the scope of the new one.

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

Solution 3:

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) { 
    returnfunction () {
        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) {
        returnfunction () {
            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).

About errors that are not shown

(Update Dec. 2021)

If any code crashes with an uncaught error, in might not show up in the div. One solution could be, if possible, to wrap all code in a try block to catch such errors and log them manually to the div.

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

Solution 4:

Else, if you were concerned at keeping log, warn and error separate from one another, you could do something like this (adapted from MST's answer):

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

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

where #log is your HTML element. The variable verb is one of 'log', 'warn', or 'error'. You can then use CSS to style the text in a distinguishable way. Note that a lot of this code isn't compatible with old versions of IE.

Solution 5:

How about something as simple as:

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