JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id="debugDiv"></div>

CSS

#debugDiv tt {display:block; color:#666;}
.warn {color:red;}

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
    //wait for DOM
    //then replace All console.whatever methods with our own

    var debugEl = document.getElementById("debugDiv"),
        olog = function(msg){
            var newEl = document.createElement("tt");
            newEl.className = 'error';
            if(olog.caller){
                newEl.className = (olog.caller.toString().split("console.")[1].split("(")[0]);
            }
            var newContent = document.createTextNode(msg); 
            newEl.appendChild(newContent);
            debugEl.appendChild(newEl);
        },
        methods = ['assert','clear','count','debug','dir','dirxml','error','exception','group','groupCollapsed','groupEnd','info','log','markTimeline','profile','profileEnd','table','time','timeEnd','timeStamp','trace','warn'],
        length = methods.length,
        console = {};
    while(length--){
        var method = methods[length];
        var m = method;
        console[method] = olog;
    };   
    
    //capture window errors
    window.onerror = console.warn;
    

    
    //test 1
    console.log("agggbcde");
    
    //test 1
    debugEl.onclick = function(){
        console.log("agggbcde");
    }
    
    
    //test 2, JS gobbeldygook
    dfgfdfdg;


  });