Console Log Wrapper To Html

Display the messages sended to console.log into a html div.

by Miguel Roman

HTML

<script src="https://rawgit.com/miguelerm/002e2ed7edf42be69fb6/raw/log-wrapper.js"></script>
<h1>Log</h1>
<div id="logger">

</div>

CSS

#logger {
  background-color: #E6E6E6;
  width: calc(100% - 16px);
  font-family: consolas;
  font-size: small;
  border: 1px dashed #A4A4A4;
  border-radius: 5px;
  padding: 5px;
}

#logger > p {
  margin: 0;
  padding: 2px;
  border-bottom: 1px dashed #D8D8D8;
}

#logger > p:last-of-type {
  border-bottom: none;
}

#logger > p > span {
  margin-right: 0.5em;
}

#logger > p > span:last-of-type {
  margin-right: 0;
}

JavaScript

for(var i = 0; i < 10; i++) {
	console.log("demo " + i, { id: i + 1, nombre: "nombre " + i });
}