Skip to content

Instantly share code, notes, and snippets.

@ahmed-musallam
Created December 11, 2017 19:34
Show Gist options
  • Save ahmed-musallam/d0378d3494744d412cb7b69a3313e2da to your computer and use it in GitHub Desktop.
Save ahmed-musallam/d0378d3494744d412cb7b69a3313e2da to your computer and use it in GitHub Desktop.
A simple browser console-like html setup
<!--
I use this setup primarely on jsfiddle where I do not want to open chrome console while testing js code.
example: https://jsfiddle.net/wybmxgop/1/
-->
<!-- a Mono-spaced font-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<style>
ul#console {
list-style-type: none;
font-family: 'Roboto Mono', monospace;
font-size: 14px;
line-height: 25px;
padding-left: 5px;
}
ul#console li {
border-bottom: solid 1px #80808038;
}
</style>
<ul id="console"><ul>
<script>
// adds entry to the html #console
function log(txt){
var newLine = document.createElement("li");
newLine.innerHTML = (typeof txt === 'string') ? txt : JSON.stringify(txt, null, 4);
document.querySelector('#console').appendChild(newLine);
}
</script>
@brainstormot
Copy link

Simple and Good code, thanks!

@jsa2
Copy link

jsa2 commented Sep 6, 2021

Thx!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment