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?

Answers:

Answer
  1. Expand the JavaScript panel
  2. Select jQuery Edge
  3. Select Firebug Lite.

Example of Settings

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

Example of Output

Answer

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
Answer
  • 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

Answer

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

Dev Tools Console

Answer

works fine... here

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

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

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.

CodePen Example

Answer

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

firebug

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

Stack Snippets

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

jsFiddle Console

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

Answer

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/

GitHub: https://github.com/karimayachi/html-console-output

Answer

I might be late to the party but just wanted to mention that JSfiddle has just released the new console feature. Just turn it on in the Settings if it doesn't work for you.

enter image description here

Still in beta but hey... no more annoying workarounds.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.