gramjs/examples/betterLogging.js

rewireLoggingToElement(
  () => document.getElementById("log"),
  () => document.getElementById("log-container"),
  true
);

function rewireLoggingToElement(eleLocator, eleOverflowLocator, autoScroll) {
  fixLoggingFunc("log");

  function fixLoggingFunc(name) {
      console.old = console.log
    console.log = function(...arg) {
      const output = produceOutput(name, arg);
      const eleLog = eleLocator();

      if (autoScroll) {
        const eleContainerLog = eleOverflowLocator();
        const isScrolledToBottom =
          eleContainerLog.scrollHeight - eleContainerLog.clientHeight <=
          eleContainerLog.scrollTop + 1;
        eleLog.innerHTML += output + "<br>";
        if (isScrolledToBottom) {
          eleContainerLog.scrollTop =
            eleContainerLog.scrollHeight - eleContainerLog.clientHeight;
        }
      } else {
        eleLog.innerHTML += output + "<br>";
      }

    };
  }

  function produceOutput(name, args) {
      arg =  args[0].replace("%c","")
    return '<span style="'+ args[1]+'">'+arg+"</span>&nbsp;"
    
  }
}