In-pane logging for JSFiddle

fiddle.log.js

/**
 * 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.min.js

/**
 * 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}())};