When I use JS Fiddle, I find myself wanting console.log() stuff to show up in the output pane as well as the actual JavaScript console.
console.log('hello', 'world')
.clear()
.log('what', {now: true}, ['jim'])('Okay')
._.log('what', {now: true}, ['jim']);| # jsFiddle Console (c) Jason Schwarzenberger 2013 - License MIT | |
| jsFiddleConsole = -> | |
| nb = ' ' | |
| ol = document.getElementById 'console' | |
| if !ol | |
| ol = document.createElement 'ol' | |
| ol.setAttribute 'id', 'console' | |
| body = document.getElementsByTagName('body')[0].appendChild ol | |
| window.console = ((console) -> | |
| count = 0 | |
| c = (args...) -> | |
| console.log.apply console, args | |
| return c | |
| c._ = console | |
| c.clear = -> | |
| count = 0 | |
| ol.innerHTML = '' | |
| console.log 'console reset' | |
| return c | |
| c.log = (args...) -> | |
| li = document.createElement 'li' | |
| line = (args.map (arg) -> | |
| joined = if /string/i.test typeof arg then arg else JSON.stringify arg | |
| return "<code>#{joined.replace /\ /g, nb}</code>" | |
| ).join ",#{nb}" | |
| number = if /ol/i.test ol.tagName then '' else "#{++count}:#{Array(5).join nb}" | |
| li.innerHTML = "#{number}#{line}" | |
| ol.appendChild li | |
| console.log.apply console, args | |
| return c | |
| return c | |
| ) console |
| /* | |
| Set the library settings to onDomReady and jQuery. | |
| JavaScript resource: https://gist.github.com/raw/4703451/console-resource.css | |
| */ | |
| ul, ol { | |
| font-family: monospaced; | |
| } | |
| li { | |
| margin: 8px 4px; | |
| } | |
| code { | |
| border: solid 1px #e5e5e5; | |
| background-color: #f9f9f9; | |
| } |
| // JavaScript resource: https://gist.github.com/raw/4703451/console-resource.js | |
| // jsFiddle Console (c) Jason Schwarzenberger 2013 - License MIT | |
| // Compiled from CoffeeScript, then minified. | |
| var jsFiddleConsole,__slice=[].slice;jsFiddleConsole=function(){var e,t,n;t=" ";n=document.getElementById("console");if(!n){n=document.createElement("ol");n.setAttribute("id","console");e=document.getElementsByTagName("body")[0].appendChild(n)}return window.console=function(e){var r,i;i=0;r=function(){var t;t=1<=arguments.length?__slice.call(arguments,0):[];e.log.apply(e,t);return r};r._=e;r.clear=function(){i=0;n.innerHTML="";e.log("console reset");return r};r.log=function(){var s,o,u,a;s=1<=arguments.length?__slice.call(arguments,0):[];o=document.createElement("li");u=s.map(function(e){var n;n=/string/i.test(typeof e)?e:JSON.stringify(e);return"<code>"+n.replace(/\ /g,t)+"</code>"}).join(","+t);a=/ol/i.test(n.tagName)?"":""+ ++i+":"+Array(5).join(t);o.innerHTML=""+a+u;n.appendChild(o);e.log.apply(e,s);return r};return r}(console)} | |
| // domready (c) Dustin Diaz 2012 - License MIT | |
| !function(a,b){typeof module!="undefined"?module.exports=b():typeof define=="function"&&typeof define.amd=="object"?define(b):this[a]=b()}("domready",function(a){function m(a){l=1;while(a=b.shift())a()}var b=[],c,d=!1,e=document,f=e.documentElement,g=f.doScroll,h="DOMContentLoaded",i="addEventListener",j="onreadystatechange",k="readyState",l=/^loade|c/.test(e[k]);return e[i]&&e[i](h,c=function(){e.removeEventListener(h,c,d),m()},d),g&&e.attachEvent(j,c=function(){/^c/.test(e[k])&&(e.detachEvent(j,c),m())}),a=g?function(c){self!=top?l?c():b.push(c):function(){try{f.doScroll("left")}catch(b){return setTimeout(function(){a(c)},50)}c()}()}:function(a){l?a():b.push(a)}}) | |
| domready(jsFiddleConsole); |