How to get console inside jsfiddle

Question

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?

Answer 1

1. Expand the JavaScript panel
2. Select jQuery Edge
3. Select Firebug Lite.

Which should add an inline console to the bottom of the results tab

Answer 2

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

1. Firebug Lite Debugger ^Demo

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

2. Stack Snippets Virtual Console ^Demo

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

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

3. Add jsFiddle Console ^Demo

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

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

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:

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])

Further Reading

• Print Var in JsFiddle

Answer 3

pretty simple one..

example

github

Just add the following URL to External Resources in jsfiddle, you will see console.log and console.error in the result screen.

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js