HTML Console

by dumptyd

HTML

<div class="console"></div>

CSS

body {
  font-family: 'Arial';
  height: 100%;
  width: 100vw;
  overflow-x: hidden;
  padding: 20px 0;
}
.console {
  margin: 0 auto;
  font-size: .9rem;
  background-color: #333;
  width: 90%;
  height: 90%;
  color: #fff;
  padding: 1rem;
  box-sizing: border-box;
}

.item:not(:first-child) {
  margin-top: .5rem;
}

JavaScript

const old = console.log.bind(console);
console.log = function() {
	const c = document.querySelector('.console');
  const str = [...arguments].reduce((acc, curr) => `${acc} ${curr}`, '');
  c.innerHTML += `<div class="item">${str}</div>`;
  old(arguments);
};