How can I get the console to show in a fiddle on JSfiddle.com?

I recently saw a fiddle that had the console embedded in the fiddle, anyone know how this can be done?

There are several ways to embed a virtual console inside of any web page...

1. Firebug Lite Debugger <sup> Demo </sup>

Include the following script from Firebug Lite, served via raw.githack.com:

https://rawcdn.githack.com/firebug/firebug-lite/firebug1.5/build/firebug-lite-debug.js

firebug

2. Stack Snippets Virtual Console <sup> Demo </sup>

Include the following script from /u/canon, used in Stack Snippets:

https://stacksnippets.net/scripts/snippet-javascript-console.min.js

Stack Snippets

3. Add jsFiddle Console <sup> Demo </sup>

Include the following script from eu81273, served via raw.githack.com :

https://raw.githack.com/eu81273/jsfiddle-console/master/console.js

jsFiddle Console

4. Roll You Own

Here's a trivial implementation that wraps the existing console.log call and then dumps out the prettified arguments using document.write:

<!-- begin snippet: js hide: false console: false babel: false --> <!-- language: lang-js -->
var oldLog = window.console.log
window.console.log = function(...args) {
    document.write(JSON.stringify(args, null, 2));
    oldLog.apply(this, args);
}

console.log("String", 44, {name: "Kyle", age: 30}, [1,2,3])
<!-- end snippet -->

Further Reading