Universal debug console for embedded HTML/JavaScript applications

commandline.html

<!--
    This conains an input field for a JS command and output area to displaying whatever your command returns.
    To execute command press Enter key or push "Execute" button on the right(if Enter key is being captured).
-->
<div style="width: 100%; display: flex; flex-direction: column; align-items: stretch;">
    <div style="display: flex; margin: 5px; align-items: center;">
        <input id="console-input" style="font-family: monospace; margin-right: 5px; flex: 1;">
        <button id="console-exec">Execute</button>
    </div>
    <div id="console-output" style="white-space: pre-line; font-family: monospace; margin: 5px; border: 1px solid #000; padding: 5px;">
    </div>
    <script>
        (() => {
            const input = document.querySelector('#console-input');
            
            const executeCommand = () => {                    
                const output = document.querySelector('#console-output');
                const command = input.value;

                try {
                    output.innerHTML = eval(command);
                } catch (error) {
                   output.innerHTML = error.toString();
                }
            };
            
            input.addEventListener('keyup', (e) => {
                if(e.key === 'Enter') {
                    executeCommand();
                }
            });
            document.querySelector('#console-exec').addEventListener('click', executeCommand);
        })();
    </script>
</div>

console-log.html

<!--
    This will capture your console.log() calls and put them into #console-log.
    If you want to use it with prod build, then replace console.log() with window.domConsole.log() or domConsole.log() call.
-->
<div id="console-log" style="width: 100%; display: flex; flex-direction: column; align-items: stretch;">
  <script>
    (() => {
      const console = window.console;
      
      const logMessage = (message) => {
        const span = document.createElement('span');
        
        let content = message;
        
        try {
          if(typeof message !== 'string') {
            if(message instanceof Error) {
              content = message.toString();
            } else {
              content = JSON.stringify(message, null, 2);
            }
          }
        } catch (error) {}
        
        span.innerText = String(content) + ' ';
        
        span.style.whiteSpace = 'pre-wrap';
        
        return span;
      };
      
      const log = (type, messages) => {
        const div = document.createElement('div');
        
        div.appendChild(logMessage(type));
        div.style.border = '1px solid #eee';
        div.style.margin = '5px';
        div.style.padding = '5px';
        
        messages.forEach((message) => {
          div.appendChild(logMessage(message));
        });
        
        document.querySelector('#console-log').appendChild(div);
      };
      
      const domConsole = {
        log(...args) {
          console.log(...args);
          log('LOG:', args);
        },
        warn(...args) {
          console.warn(...args);
          log('WARN:', args);
        },
        error(...args) {
          console.error(...args);
          log('ERROR:', args);
        },
      };
      
      window.domConsole = domConsole;
      window.console = domConsole;
    })()
  </script>
</div>