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?

CodeBroJohn

Expand the JavaScript panel
Select jQuery Edge
Select Firebug Lite.

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

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

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

works fine... here

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

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

Amrit Gautam

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

Mudo

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...

1. Firebug Lite Debugger

Include the following script from Firebug (jsFiddle Demo):

https://getfirebug.com/firebug-lite-debug.js

2. Stack Snippets Virtual Console

Include the following script from /u/canon, used in Stack Snippets (jsFiddle Demo):

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

3. Add jsFiddle Console

Include the following script from eu81273, served via raw.githack.com* (jsFiddle Demo):

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

*Note: rawgit.com is hitting End-Of-Life in October 2019, so the links in prior answers will be sunset soon. You can use any of the above scripts with appropriate static file hosting, like raw.githack which will serve .js files from github with the appropriate mime type.

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

来源：https://stackoverflow.com/questions/39130610/how-to-get-console-inside-jsfiddle

标签

javascript

console

jsfiddle