Embed JS Console within website

Question

I want to embed a JS-Console within a website for extended debugging purposes. Are there any libraries or hooks available? How can I catch console.log messages?

Answer 1

You could use the eval() function to evaluate javascript in a string and then print that output to some div. This would give you some capabilities of a REPL.

const consoleElm = document.querySelector('#console');
const clearButton = document.querySelector('#clear');

clearButton.addEventListener('click', (event) => {
	consoleElm.innerHTML = '';
});

const consoleForm = document.querySelector('#console-form');
consoleForm.addEventListener('submit', (event) => {
	event.preventDefault();
  const command = event.target.querySelector('#command').value;
  const value = eval(command);
  consoleElm.innerHTML += (value === undefined ? 'undefined' : value) + '\n';
});

  

    
    
    Clear