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?
105
votes
Any chance that the fiddle just did something like this? jsfiddle.net/FL4XL
- JonSG
@VtoCorleone this is what I wanted jsfiddle.net/c42vd3m9/1 CodeBroJohn answered it. Super useful
- Adam Buchanan Smith
I'm voting to close this question as off-topic because this is about a web service
- Evan Carroll
@EvanCarroll JS Fiddle is a software tool commonly used by programmers so it's on topic on this site. Ref. help center.
- Rubén
This question is not clear enough when I searched this I just wanted a JavaScript solution, not a specific library console using jQuery. This is not a bad thing; however, maybe include more information like your jsfiddle reference to the question.
- Dalton
9 Answers
75
votes
96
votes
33
votes
- 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
- or: under Resources add
- and run your script hitting that Play button
16
votes
14
votes
works fine... here
var consoleLine = "<p class=\"console-line\"></p>";
console = {
log: function (text) {
$("#console-log").append($(consoleLine).html(text));
}
};
console.log("Hello Console")
4
votes
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.
3
votes
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
1
votes
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/
