How to get console inside jsfiddle
JavascriptConsoleJsfiddleJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
pretty simple one..
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
Solution 2 - Javascript
- Expand the JavaScript panel
- Select jQuery Edge
- Select Firebug Lite.
Which should add an inline console to the bottom of the results tab
Solution 3 - Javascript
- click on that arrow next to JavaScript
- and as FRAMEWORKS & EXTENSIONS select No-Libary (Pure JS)
- paste your
console.log('foo');
in JS box - under Resources add
https://rawgit.com/eu81273/jsfiddle-console/master/console.js
- or: under Resources add
https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
- and run your script hitting that Play button
Solution 4 - Javascript
I couldn't find any option for selecting the Firebug extension in the JavaScript gear option, and I didn't want to add external links/libraries, but there is another simple solution.
You can use your browser's built in console
Solution 5 - Javascript
works fine... here
var consoleLine = "<p class=\"console-line\"></p>";
console = {
log: function (text) {
$("#console-log").append($(consoleLine).html(text));
}
};
console.log("Hello Console")
Solution 6 - Javascript
None of the above solutions worked for me, since I needed an interactive console to be able to dynamically set a variable when testing reactivity in Vue.js.
So I switched to Codepen, which has a an interactive console scoped to your application.
Solution 7 - Javascript
There are several ways to embed a virtual console inside of any web page...
Demo
1. Firebug Lite DebuggerInclude 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
Demo
2. Stack Snippets Virtual ConsoleInclude the following script from /u/canon, used in Stack Snippets:
https://stacksnippets.net/scripts/snippet-javascript-console.min.js
Demo
3. Add jsFiddle ConsoleInclude 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
Solution 8 - Javascript
For future reference: the jsfiddle-console from answer was exactly what I needed when teaching a class on JavaScript. However I found it to be too limited to be of any actual use in this situation. So I made my own.
Maybe it will serve anyone here.
Just add the CDN-version to the resources of jsFiddle:
https://unpkg.com/html-console-output
Example here: https://jsfiddle.net/Brutac/e5nsp2mu/