How to get console inside jsfiddle

问题

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?

回答1:

Expand the JavaScript panel
Select jQuery Edge
Select Firebug Lite.

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

回答2:

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

回答3:

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

回答4:

works fine... here

var consoleLine = "<p class=\"console-line\"></p>";

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
console.log("Hello Console")

回答5:

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

回答6:

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.

回答7:

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