div-console.js

var vConsoleHid = (function hookVirtualConsole(window, document, undefined) {
	var [ input, btn, container, log ] = [ 'input', 'button', 'div', 'div' ].map((tag) => document.createElement(tag));
	container.setAttribute('style',
		`position: fixed; z-index: 99999999; left: 10vw; width: 80vw; top: calc(80vh - 100px); height: 160px; border: 2px solid #ccc; background-color: rgba(0,0,0,.2); overflow-y: auto;`
	);
	input.setAttribute('style', 'width: 95%; position: absolute; bottom: 0; left: 0;' );
	input.setAttribute('placeholder', 'JavaScript' );
	btn.textContent = 'Eval';
	btn.setAttribute('style', 'width: 5%; position: absolute; bottom: 0; right: 0;' );
	function submitScript() {
		var script = input.value;
		input.value = '';
		try { eval(script); } catch (e) { console.error(e); }
    }
	btn.addEventListener('click', submitScript);
	input.addEventListener('keydown', function(e) {
		if (e.keyCode === 13) {
			submitScript();
		}
    });
	container.appendChild(log);
	
	// Uncomment if you want to add an input box for evaluating code
	// container.appendChild(input);
	// container.appendChild(btn);

	['log','info','warn','error'].forEach((method) => {
		const next = console[method];
		console[method] = function(...args) {
			var line = document.createElement('p');
			line.setAttribute('style', 'margin: 2.5px 5px');
			line.textContent = args.map((arg) => arg.toString()).join(' ');

			line.style.color = ({ error: '#ff3434' })[method] || '#000';
			line.style.backgroundColor = ({	warn: '#fffbe6', error: '#fff0f0' })[method] || '#fff';

			log.appendChild(line);

			container.scrollTop = container.scrollHeight;

			return next(...args);
        }
    })
	document.body.appendChild(container);
	container.scrollTop = container.scrollHeight;
	return container;
})(this, document)