Display console log results inside html element

Question

• it's possible to catch the browser console log and display it in html element i know this question is asked many times before but what i found is just they are overwrite console.log() function like console.log = (masg) => elem.innerHTML = msg i think that it's nothing it's just add new function with the same name of console.log but i need to get the value of console after it's gone through it and displayed the error or objects, array, etc.. result
• my question is how can i get all the log of the console and display it in html element not just errors but also testing results can anyone help me

Answer 1

You can use this code

console.log = function(...logs) 
{
    var text = logs.map(e=> JSON.stringify(e)).join(' ');
    elem.innerHTML = text;
}

Beware of circular structures. It brings error.

Extended variant

var consoleLog = console.log;
console.log = console.error = console.warn = function(...logs) {

    var text = logs.map(e=> {
                   if (e instanceof Error) return `Error: ${e.message}`;
                   else if (Array.isArray(e)) return `<ul>${e.map(l => `<li>${l}</li>`).join('')}</ul>`;
                   // other stuff
                   else {
                       try {
                           return JSON.stringify(e);
                       } catch(e) {
                           consoleLog(...logs);
                           return `${e.message}<br/>See the console for details`;
                       }
                   }
               }).join(' ');

    elem.innerHTML = text;
}