console.log() on screen

consoleLog.md

I have three (3) code files here: HTML, CSS and JS

WHY?

I got tired of having to opening up the inspect and I didn't feel like using nodemon or node --watch, so I come up with this little idea to just pust console.log() right on the screen while I was coding. lol

Have Fun and make it better for yourself!!

HTML

<h2>Custom Console</h2>
<div id="custom-console"></div>

CSS

 #custom-console {
   width: 100%;
   height: 300px;
   border: 1px solid #ccc;
   overflow-y: auto;
   background-color: #f9f9f9;
   font-family: monospace;
   color: black;
 }
 
 .log {
   margin: 0;
   padding: 2px 0;
 }

Javascript

// Get the custom console element
const customConsole = document.getElementById('custom-console');

// Override the default console.log function
(function () {
 const originalLog = console.log;

 console.log = function (...args) {
   // Display the log on the page
   args.forEach(arg => {
     const logEntry = document.createElement('div');
     logEntry.className = 'log';
     logEntry.textContent = arg;
     customConsole.appendChild(logEntry);
   });

   // Keep the default console.log functionality
   originalLog.apply(console, args);

   // Scroll to the bottom of the custom console
   customConsole.scrollTop = customConsole.scrollHeight;
 };
})();

Notes

This code does not show errors