How to get console inside jsfiddle

Question

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?

Any chance that the fiddle just did something like this? http://jsfiddle.net/FL4XL/ — JonSG, Aug 24 '16 at 18:33
No it was an actual console inside the fiddle, I am going to go through my browser history to find the example. — Adam Buchanan Smith, Aug 24 '16 at 18:38
@VtoCorleone this is what I wanted https://jsfiddle.net/c42vd3m9/1/ CodeBroJohn answered it. Super useful — Adam Buchanan Smith, Aug 24 '16 at 18:57
I'm voting to close this question as off-topic because this is about a web service — Evan Carroll, Jul 16 '18 at 01:48
@EvanCarroll JS Fiddle is *a software tool commonly used by programmers* so it's on topic on this site. Ref. [help/on-topic]. — Rubén, Jul 16 '18 at 18:56
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. — , Jul 15 '19 at 01:26
Possible duplicate of [Print Var in JsFiddle](https://stackoverflow.com/questions/17382200/print-var-in-jsfiddle) — KyleMit, Aug 29 '19 at 02:12
@KyleMit the original question was different although the answers were simular. It's not duped, the original queation was more of an xy queastion and was not searchable in the same context. Also, it is for 2 different versions of fiddle. — Adam Buchanan Smith, Sep 04 '19 at 21:01
@AdamBuchananSmith, I here ya. I don't think duplicate here is a bad sounding word or means there's anything wrong with this question. At this point, both questions have similar answers and both just simply refer to whatever the current version of fiddle happens to be. Plenty of votes on this issue agrees that you definitely hit the searchability piece with the titling, which is why using a dupe to forward users to a single canonical answer is a good strategy for folks who hit this issue in the future. — KyleMit, Sep 04 '19 at 21:10
@AdamBuchananSmith, I hope that makes sense. I didn't mean to suggest anything was wrong with this question itself, just that it's nearly identical to the other and users who find one helpful will likely find both helpful, would you agree - or am I missing something? — KyleMit, Sep 04 '19 at 21:11
@KyleMit The linked question is asking **"How would I print something to the result screen in JsFiddle from my JavaScript. I can't use document.write(), it doesn't allow it, neither print."** in the newer versions on JSfiddle `document.write()` is allowed without console. My question is specifically asking how to embed a console into JSfiddle. — Adam Buchanan Smith, Sep 05 '19 at 14:57
@KyleMit While both answers, answer each question, the answer below is more correct for current versions of fiddles, no external links needed. "Possible duplicate" 's get voted on to be removed and is not the correct method for sharing a link to another answer, you could have simply linked the other question in the comments without voting it as a dup. — Adam Buchanan Smith, Sep 05 '19 at 14:57
@AdamBuchananSmith, duplicate questions do not get "removed" if they have a non-zero score. All the points and votes earned on this question will continue to exist and even increment as people find it. — KyleMit, Sep 05 '19 at 15:35

user1855278 · Answer 1 · 2019-05-03T05:09:28.440

100

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

edited May 03 '19 at 05:09

answered Apr 19 '17 at 01:55

user1855278

1,011
1
7
5

1

i was looking for this and this does the job. Although to view the object graph in the log, instead of [object Object], just press F12 and see the logs in the browser console. – cirovladimir Aug 10 '18 at 18:05
1

great! although it's still printing the ugly [object Object] and it prints three dots for nested objects. Nevertheless it is very helpful in some cases. I'm using the web browser console now though. – cirovladimir Mar 21 '19 at 16:28
this is true only for empty HTML (only javascript) – ng10 Dec 17 '19 at 10:00

score 76 · Accepted Answer · edited Mar 25 '19 at 20:16

76

Expand the JavaScript panel
Select jQuery Edge
Select Firebug Lite.

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

edited Mar 25 '19 at 20:16

KyleMit

30,350
66
462
664

answered Aug 24 '16 at 18:49

CodeBroJohn

1,085
8
17

20

it should simply be included that you need to have your javascript set to use the jQuery edge library or a subset of jQuery to see the firebug lite option, else it will not show up readily. – Tope Mar 31 '17 at 18:47
4

The answer [bellow](https://stackoverflow.com/a/43484981/1259637) looks like a better solution if you don't want to use JQuery. – Robert Dec 29 '17 at 12:01
This solution requires you to use jQuery, not vanilla JavaScript. – Jul 15 '19 at 01:23

player0 · Answer 3 · 2019-05-03T12:39:29.183

36

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

edited May 03 '19 at 12:39

answered Jul 16 '18 at 19:54

player0

124,011
12
67
124

5

The **gif** is really helpful. – AlexMelw Oct 14 '18 at 18:36
2

@Ruben, except that this answer appeared before the top voted one so deserves the credit! + the gif really helps!! – Anshuman Manral Mar 13 '19 at 13:13

score 21 · Answer 4 · edited Mar 25 '19 at 20:28

21

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

edited Mar 25 '19 at 20:28

KyleMit

30,350
66
462
664

answered Oct 25 '17 at 18:41

Amrit Gautam

329
2
7

1

I am surprised to see how this answer is downvoted. The answer seems to be pretty realistic, simple and non redundant. Any explanation?? Atleast, I am trying to suggest other alternatives and possible solutions. – Amrit Gautam Oct 27 '17 at 06:31
1

I am sorry the downvote is upsetting for you. Downvote is nothing to do with your method - it's because this isn't an answer to the question. It's a suggestion of an alternative and that would be better placed as a comment to OP question. I cannot remove the downvote unless you update the answer and I would only remove it if the update made this an answer to the question or provided a reasonable set of reasons why this method is a viable option above what OP asked for. – William Patton Oct 29 '17 at 21:55
Using the Browser's built in Console, I can see the results of `console.log()` as you demonstrate, but I still cannot interact with variables in the jsfiddle. Is there any way to do it? – krubo Dec 08 '18 at 20:54
2

Upvote, because I dont see the option for the firebug extension either, the simplest solution is to just hit F12 – humans Jan 18 '19 at 01:44
The approach works but is not perfect. The console logs appear (obviously) on the built in console but Jsfiddle does not render the webpage (fiddle) itself properly after that. What is needed is a dedicated console pane inside jsfiddle (similar the one provided by other playgrounds like JSBin, CodePen etc.). I noticed that the feature is in-fact under development in their roadmap (https://trello.com/b/LakLkQBW/jsfiddle-roadmap) – Anshuman Manral Mar 13 '19 at 10:17
1

@AnshumanManral I don't care about when and where it is going to be there, until solution works. I don't see any reason to downvote though! – Amrit Gautam Mar 19 '19 at 22:11
1

Worth adding- go into the options on jsFiddle and switch to tabbed view, so you don't have HTML and CSS panes taking up space even though you're not using them. Set the CSS to `* { background-color:black}` so you don't have a big white box on an otherwise dark page. – Kip May 20 '19 at 18:51

score 15 · Answer 5 · answered Aug 24 '16 at 18:40

15

works fine... here

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

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

answered Aug 24 '16 at 18:40

fernando

814
1
9
24

1

Thank you for your answer, your answer literally answers what I was asking but I wasn't clear on my question, so I will give you a plus 1, here is a link to a fiddle that shows what I was talking about https://jsfiddle.net/c42vd3m9/1/ – Adam Buchanan Smith Aug 24 '16 at 19:00

score 4 · Answer 6 · edited Mar 25 '19 at 22:22

4

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.

edited Mar 25 '19 at 22:22

KyleMit

30,350
66
462
664

answered Feb 22 '19 at 12:56

Mudo

207
3
8

I also noticed that I was unable to interact with the DOM using jQuery and the native browser console in Js Fiddle. With CodePen I was able to open the native console and select my html elements using jQuery selectors. – nflauria Jun 19 '19 at 18:50

KyleMit · Answer 7 · 2019-08-29T02:13:48.793

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

How to get console inside jsfiddle

9 Answers9

You can use your browser's built in console

1. Firebug Lite Debugger ^Demo

2. Stack Snippets Virtual Console ^Demo

3. Add jsFiddle Console ^Demo

4. Roll You Own

Further Reading

Linked

How to get console inside jsfiddle

9 Answers9

You can use your browser's built in console

1. Firebug Lite Debugger Demo

2. Stack Snippets Virtual Console Demo

3. Add jsFiddle Console Demo

4. Roll You Own

Further Reading

Linked

1. Firebug Lite Debugger ^Demo

2. Stack Snippets Virtual Console ^Demo

3. Add jsFiddle Console ^Demo