How can i display the console for debugging JavaScript on jsfiddle? 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?

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?

• javascript
• jsfiddle

• 3 I don't think so. Open your browser's console. – Felix Kling Commented Jun 5, 2018 at 6:35
• 1 There's no console panel in jsfiddle's page itself. However, your console.log()'s in jsfiddle are written into your browser console. – ionizer Commented Jun 5, 2018 at 6:40
• @ionizer There is when using firebug – mplungjan Commented Jun 5, 2018 at 7:15
• 2 Possible duplicate of How to get console inside jsfiddle – Evan Carroll Commented Jul 16, 2018 at 1: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 Commented Jun 20, 2020 at 15:35

7 Answers 7

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:

-- Latest Simple JSFiddle Solution --

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

which appears at the bottom of the results panel:

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.

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

you can use browser console by

Rightclick > inspect element > console

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

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