Skip to content

Instantly share code, notes, and snippets.

@onecrayon

onecrayon/fiddle.log.js

Last active Aug 29, 2015
Embed
What would you like to do?
In-pane logging for JSFiddle
/**
* fiddle.log()
*
* An alternative to console.log that will output log items within the window;
* written primarily for use with Javascript-only JSFiddles
*
* https://gist.github.com/onecrayon/8cb83d129e971b6bfec9
*
* Copyright 2014 Ian Beck, released under an MIT license
*/
if (!window.fiddle) {
window.fiddle = {};
}
if (!window.fiddle.log) {
window.fiddle.log = (function() {
// This function converts Javascript objects to strings recursively
function objectToString(obj) {
var output = '';
if (typeof obj === 'string') {
output = '"' + obj + '"';
} else if (obj === null) {
output = 'null';
} else if (obj === NaN) {
output = 'NaN';
} else if (typeof obj === 'undefined') {
output = 'undefined';
} else if (typeof obj === 'boolean') {
output = (obj ? 'true' : 'false');
} else if (typeof obj === 'number') {
output += obj;
} else if (Object.prototype.toString.call(obj) === '[object Array]') {
output += 'Array[ ';
for (var i = 0; i < obj.length; i++) {
output += objectToString(obj[i]);
if (i < obj.length - 1) {
output += ', ';
}
}
output += ' ]';
} else if (typeof obj === 'object') {
output += "Object{";
var idx = 0;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if (idx === 0) {
output += "\n";
} else {
output += ",\n";
}
output += ' "' + key + '": ' + objectToString(obj[key]);
idx++;
}
}
output += "\n}";
} else if (typeof obj === "function") {
output = obj.toString();
}
return output;
}
var preInited = false, logPre, logPreItem;
function logToPre() {
// Initialize our elements, if needed
if (!preInited) {
// Setup our console element
logPre = document.createElement('pre');
logPre.id = 'logupConsole';
logPre.setAttribute('style', 'position: fixed; bottom: 0px; left: 0px; width: 100%; max-height: 200px; overflow: auto; border-top: 1px solid #c0c0c0; background: #fff; color: #333; box-shadow: 0 0 3px #c0c0c0; margin: 0; padding: 0;');
// Setup our header element
var header = document.createElement('h1');
header.textContent = 'fiddle.log():';
header.setAttribute('style', 'margin: 0; padding: 5px 10px 2px; font-size:14px; font-weight: bold; background: #fff;');
logPre.appendChild(header);
// Setup our item element
logPreItem = document.createElement('code');
logPreItem.setAttribute('style', 'border-top: 3px solid #fff; padding: 5px 10px; display: block; background: #f6f6f6;');
// Setup the body, and insert out console
var curMargin = (document.body.style.marginBottom ? parseInt(document.body.style.marginBottom, 10) : 0);
document.body.style.marginBottom = curMargin + 210 + 'px';
document.body.appendChild(logPre);
preInited = true;
}
var output = '';
for (var i = 0; i < arguments.length; i++) {
output += objectToString(arguments[i]);
if (i < arguments.length - 1) {
output += " ";
}
}
var nextNode = logPreItem.cloneNode(false);
nextNode.textContent = output;
logPre.appendChild(nextNode);
}
return logToPre;
}());
}
/**
* fiddle.log()
*
* An alternative to console.log that will output log items within the window;
* written primarily for use with Javascript-only JSFiddles
*
* https://gist.github.com/onecrayon/8cb83d129e971b6bfec9
*
* Copyright 2014 Ian Beck, released under an MIT license
*/
if(!window.fiddle){window.fiddle={}}if(!window.fiddle.log){window.fiddle.log=(function(){function d(k){var g="";if(typeof k==="string"){g='"'+k+'"'}else{if(k===null){g="null"}else{if(k===NaN){g="NaN"}else{if(typeof k==="undefined"){g="undefined"}else{if(typeof k==="boolean"){g=(k?"true":"false")}else{if(typeof k==="number"){g+=k}else{if(Object.prototype.toString.call(k)==="[object Array]"){g+="Array[ ";for(var j=0;j<k.length;j++){g+=d(k[j]);if(j<k.length-1){g+=", "}}g+=" ]"}else{if(typeof k==="object"){g+="Object{";var f=0;for(var h in k){if(k.hasOwnProperty(h)){if(f===0){g+="\n"}else{g+=",\n"}g+=' "'+h+'": '+d(k[h]);f++}}g+="\n}"}else{if(typeof k==="function"){g=k.toString()}}}}}}}}}return g}var a=false,b,c;function e(){if(!a){b=document.createElement("pre");b.id="logupConsole";b.setAttribute("style","position:fixed;bottom:0px;left:0px;width:100%;max-height:200px;overflow:auto;border-top: 1px solid #c0c0c0;background:#fff;color:#333;box-shadow:0 0 3px #c0c0c0;margin:0;padding:0;");var k=document.createElement("h1");k.textContent="fiddle.log():";k.setAttribute("style","margin:0;padding:5px 10px 2px;font-size:14px;font-weight:bold;background:#fff;");b.appendChild(k);c=document.createElement("code");c.setAttribute("style","border-top: 3px solid #fff; padding: 5px 10px; display: block; background: #f6f6f6;");var j=(document.body.style.marginBottom?parseInt(document.body.style.marginBottom,10):0);document.body.style.marginBottom=j+210+"px";document.body.appendChild(b);a=true}var g="";for(var h=0;h<arguments.length;h++){g+=d(arguments[h]);if(h<arguments.length-1){g+=" "}}var f=c.cloneNode(false);f.textContent=g;b.appendChild(f)}return e}())};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.