Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 29, 2017 17:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/6e91ad0513f21522a6b6237f33bc40ab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/6e91ad0513f21522a6b6237f33bc40ab to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin A better browser console log // source https://jsbin.com/qamiqiw
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="A better browser console log">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.console-container {
position: absolute;
background-color: #16a085;
width: 100%;
min-height: 100px;
bottom: 0;
}
.console-output {
margin: 1em;
width:94%;
min-height: 100px;
max-height: 200px;
background-color: white;
overflow: auto;
}
.console-edit {
margin-top: 1em;
margin-left:1em;
margin-right: 1em;
margin-bottom:0;
height:1.9em;
width: 94%;
}
.console-output-data {
padding: 0.3em;
border: 1px solid #ecf0f1;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
(function (c) {
var olog = c.log.bind(this);
if (!c.SHOW_CUSTOM_CONSOLE) return;
c.log = function () {
for(var i = 0; i < arguments.length; i++) {
olog(arguments[i]);
log(arguments[i]);
}
}; // log ends
function log(data) {
var output = document.getElementById("console-output");
output.insertAdjacentHTML("beforeend", "<div class='console-output-data'>" + data + "</div>");
}
setupConsoleUI();
function setupConsoleUI () {
var logPanel = document.createElement('div');
logPanel.setAttribute("id", "console-container");
document.body.append(logPanel);
logPanel.classList.add("console-container");
document.getElementById('console-container')
.insertAdjacentHTML('beforeend',
'<button title="click to clear console" id="console-btn-clear">X</button>');
document.getElementById('console-container')
.insertAdjacentHTML('beforeend',
'<div id="console-output" class="console-output"></div>');
document.getElementById('console-output')
.insertAdjacentHTML('afterend',
'<textarea placeholder="enter javascript code here..." id="console-edit" class="console-edit"></textarea>');
}
var consoleInput = document.getElementById("console-edit");
consoleInput.addEventListener("keydown", function () {
if (event.which === 13 && event.ctrlKey) {
console.log(eval(event.target.value));
event.target.value = "";
consoleOutput.scrollTop = consoleOutput.scrollHeight;
}
});
var btnClear = document.getElementById("console-btn-clear");
var consoleOutput = document.getElementById("console-output");
btnClear.addEventListener("click", function () {
consoleOutput.innerHTML = "";
});
})(console);
console.SHOW_CUSTOM_CONSOLE = true;
for(var i = 0; i < 20; i++) {
console.log(i);
}
console.log("Will this work!");
</script>
<script id="jsbin-source-css" type="text/css">.console-container {
position: absolute;
background-color: #16a085;
width: 100%;
min-height: 100px;
bottom: 0;
}
.console-output {
margin: 1em;
width:94%;
min-height: 100px;
max-height: 200px;
background-color: white;
overflow: auto;
}
.console-edit {
margin-top: 1em;
margin-left:1em;
margin-right: 1em;
margin-bottom:0;
height:1.9em;
width: 94%;
}
.console-output-data {
padding: 0.3em;
border: 1px solid #ecf0f1;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">(function (c) {
var olog = c.log.bind(this);
if (!c.SHOW_CUSTOM_CONSOLE) return;
c.log = function () {
for(var i = 0; i < arguments.length; i++) {
olog(arguments[i]);
log(arguments[i]);
}
}; // log ends
function log(data) {
var output = document.getElementById("console-output");
output.insertAdjacentHTML("beforeend", "<div class='console-output-data'>" + data + "</div>");
}
setupConsoleUI();
function setupConsoleUI () {
var logPanel = document.createElement('div');
logPanel.setAttribute("id", "console-container");
document.body.append(logPanel);
logPanel.classList.add("console-container");
document.getElementById('console-container')
.insertAdjacentHTML('beforeend',
'<button title="click to clear console" id="console-btn-clear">X</button>');
document.getElementById('console-container')
.insertAdjacentHTML('beforeend',
'<div id="console-output" class="console-output"></div>');
document.getElementById('console-output')
.insertAdjacentHTML('afterend',
'<textarea placeholder="enter javascript code here..." id="console-edit" class="console-edit"></textarea>');
}
var consoleInput = document.getElementById("console-edit");
consoleInput.addEventListener("keydown", function () {
if (event.which === 13 && event.ctrlKey) {
console.log(eval(event.target.value));
event.target.value = "";
consoleOutput.scrollTop = consoleOutput.scrollHeight;
}
});
var btnClear = document.getElementById("console-btn-clear");
var consoleOutput = document.getElementById("console-output");
btnClear.addEventListener("click", function () {
consoleOutput.innerHTML = "";
});
})(console);
console.SHOW_CUSTOM_CONSOLE = true;
for(var i = 0; i < 20; i++) {
console.log(i);
}
console.log("Will this work!");</script></body>
</html>
Raw
jsbin.qamiqiw.css
.console-container {
position: absolute;
background-color: #16a085;
width: 100%;
min-height: 100px;
bottom: 0;
}
.console-output {
margin: 1em;
width:94%;
min-height: 100px;
max-height: 200px;
background-color: white;
overflow: auto;
}
.console-edit {
margin-top: 1em;
margin-left:1em;
margin-right: 1em;
margin-bottom:0;
height:1.9em;
width: 94%;
}
.console-output-data {
padding: 0.3em;
border: 1px solid #ecf0f1;
}
Raw
jsbin.qamiqiw.js
(function (c) {
var olog = c.log.bind(this);
if (!c.SHOW_CUSTOM_CONSOLE) return;
c.log = function () {
for(var i = 0; i < arguments.length; i++) {
olog(arguments[i]);
log(arguments[i]);
}
}; // log ends
function log(data) {
var output = document.getElementById("console-output");
output.insertAdjacentHTML("beforeend", "<div class='console-output-data'>" + data + "</div>");
}
setupConsoleUI();
function setupConsoleUI () {
var logPanel = document.createElement('div');
logPanel.setAttribute("id", "console-container");
document.body.append(logPanel);
logPanel.classList.add("console-container");
document.getElementById('console-container')
.insertAdjacentHTML('beforeend',
'<button title="click to clear console" id="console-btn-clear">X</button>');
document.getElementById('console-container')
.insertAdjacentHTML('beforeend',
'<div id="console-output" class="console-output"></div>');
document.getElementById('console-output')
.insertAdjacentHTML('afterend',
'<textarea placeholder="enter javascript code here..." id="console-edit" class="console-edit"></textarea>');
}
var consoleInput = document.getElementById("console-edit");
consoleInput.addEventListener("keydown", function () {
if (event.which === 13 && event.ctrlKey) {
console.log(eval(event.target.value));
event.target.value = "";
consoleOutput.scrollTop = consoleOutput.scrollHeight;
}
});
var btnClear = document.getElementById("console-btn-clear");
var consoleOutput = document.getElementById("console-output");
btnClear.addEventListener("click", function () {
consoleOutput.innerHTML = "";
});
})(console);
console.SHOW_CUSTOM_CONSOLE = true;
for(var i = 0; i < 20; i++) {
console.log(i);
}
console.log("Will this work!");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment