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?
console.log('foo');
in JS boxhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
works fine... here
var consoleLine = "<p class=\"console-line\"></p>";
console = {
log: function (text) {
$("#console-log").append($(consoleLine).html(text));
}
};
console.log("Hello Console")
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.
There are several ways to embed a virtual console inside of any web page...
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
Include the following script from /u/canon , used in Stack Snippets :
https://stacksnippets.net/scripts/snippet-javascript-console.min.js
Include the following script from eu81273 , served via raw.githack.com :
https://raw.githack.com/eu81273/jsfiddle-console/master/console.js
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])
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.