How to show console in jsfiddle

Question

How can i display the console for debugging JavaScript on jsfiddle.net? I only see a results tab. When trying to do a console.log('test'); only a white result tab appears.

Does a console panel exists at all?

There's no console panel in jsfiddle's page itself. However, your `console.log()`'s in jsfiddle are written into your browser console. — ionizer, Jun 05 '18 at 06:40
Possible duplicate of [How to get console inside jsfiddle](https://stackoverflow.com/questions/39130610/how-to-get-console-inside-jsfiddle) — Evan Carroll, Jul 16 '18 at 01:48
JSfiddle finally came out with their own console. Just go to `Settings > Console` to active. Still in beta but finally no more annoying workarounds. — Thielicious, Jun 20 '20 at 15:35

mplungjan · Accepted Answer · 2020-05-04T10:03:16.873

12

Normally by pressing F12 or using inspect on your result pane.

Alternatively add

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js

to the resources on the left as seen here

for (var i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

console.log({
    foo: 'bar',
    baz: function() {}
});
console.log([1, 2, 3]);
console.log(window.alert);

throw new Error('This is error log..');

<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>

Old answer

Until recently if you wanted the "Stacksnippet Console" type of console, you could choose jQuery and turn on Firebug which would show console messages in the result pane:

edited May 04 '20 at 10:03

answered Jun 05 '18 at 06:41

mplungjan

169,008
28
173
236

1

As of 2020 this [doesn't seem to work](https://jsfiddle.net/kAlvaro/jp27mcgk/1/). I've found a fiddle that [displays the console](https://jsfiddle.net/eu81273/op9wumdz/) without it—I have no idea how it works. – Álvaro González May 01 '20 at 11:35
1

@ÁlvaroGonzález There is an added js file: https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js – mplungjan May 04 '20 at 09:56

score 1 · Answer 2 · answered Jan 07 '22 at 01:56

1

-- Latest Simple JSFiddle Solution --

JSFiddle now has its own beta settings for displaying the console:

which appears at the bottom of the results panel:

answered Jan 07 '22 at 01:56

allenski

1,652
4
23
39

score 0 · Answer 3 · answered Jun 05 '18 at 06:41

0

You can open it by right clicking and selecting Inspect Element on that menu or you can use f12 as a shortcut key to open console.

answered Jun 05 '18 at 06:41

Chathula Sampath Perera

349
1
4
12

Karim Ayachi · Answer 4 · 2020-01-03T16:27:14.350

You can use the package below to redirect console output in an 'inspection style' manner to the HTML pane.

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

If you also have normal HTML output, you can use CSS to overlay this console or have it stick to the top or bottom.

Basic example (no CSS) here: https://jsfiddle.net/Brutac/e5nsp2mu/

To run it inside jsFiddle, simply add the CDN-version (url below) to the resources (see example).

https://unpkg.com/html-console-output

score -1 · Answer 5 · answered Jun 05 '18 at 07:01

-1

you can use browser console by

Rightclick > inspect element > console

answered Jun 05 '18 at 07:01

Shazvan Hanif

361
3
20

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/19930011) – Michel Jun 05 '18 at 07:45
@Michel this is as good an answer as the other "Press F12/Right-click" answers above – mplungjan Jun 05 '18 at 08:06

score -1 · Answer 6 · answered Jun 05 '18 at 07:02

-1

F12, opens the debugger view and on console tab you get the logs. You can filter as required warning/info/errors/all

answered Jun 05 '18 at 07:02

Suhani Aneja

1

score -1 · Answer 7 · answered Sep 08 '18 at 10:57

(Tested on Chrome)
1- Write some simple JS code on the JS pane. e.g.> console.log("hello");
2- Click on "Run".
3- On the "Result" pane, right click and pick "Inspect".
4- Go to the Console.
5- Make sure that you filter your results.(See picture down below).
And do NOT click on "Update" in order to keep a clean console. Every time you want to test new code, just hit "Run" or use shortcut: Ctrl + Enter.

How to show console in jsfiddle

7 Answers7

-- Latest Simple JSFiddle Solution --