How can I output results to the 'result' window in JSFiddle?

Question

I've tried using console.log() but I need to have the developer window open in chrome to see the output. Alert() writes to the pop-up box. I want to output to the result window (bottom-right pane) in JSFiddle. Can anyone tell me please?

Updated with a visual of answer by JajaDrinker - thanks for this.

enter image description here

Can we see some code? Just to look for the problem. This can be from many things. and finding a code sample that produces your error is not so easy ^^ — JajaDrinker, Apr 04 '14 at 15:56
The results window is just what a browser would render. If you are looking to print to it you would need to create an HTML element and fill it with text. I suppose you don't really need to add an element but it would be the same as if you were to print to the browser. — Rudy Garcia, Apr 04 '14 at 15:58
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:49

score 25 · Accepted Answer · edited Jan 08 '16 at 10:41

25

Add this to the HTML section:

<div id="console-log"></div>

Add this to the JavaScript section:

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

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

Optionally, add this to the CSS to make it more user friendly:

.console-line
{
    font-family: monospace;
    margin: 2px;
}

You can see an example here.

edited Jan 08 '16 at 10:41

Robert MacLean

38,975
25
98
152

answered Apr 04 '14 at 16:02

JajaDrinker

652
6
15

save some time with `text = typeof text === 'object' ? JSON.stringify(text) : text`, don't have to worry about what you feed the log override. – zamnuts Nov 14 '15 at 02:45

Pete · Answer 2 · 2014-04-04T17:03:49.060

Here's is an unobtrusive solution, so you won't need to modify your HTML. I used a pre tag, but you can use any tag you want.

console = {
    _createConsole : function() {
        var pre = document.createElement('pre');
        pre.setAttribute('id', 'console');
        document.body.insertBefore(pre, document.body.firstChild);
        return pre;
    },
    log: function (message) {
        var pre = document.getElementById("console") || console._createConsole();
        pre.textContent += ['>', message, '\n'].join(' ');
    }
};

Sample JSFiddle with CSS styling.
Here is an version that could be bundled as an external js module for a larger project.

score 9 · Answer 3 · answered Jun 09 '16 at 20:30

9

The way I do it is add https://getfirebug.com/firebug-lite-debug.js as an external script.

answered Jun 09 '16 at 20:30

Bill H

2,069
2
20
29

score 1 · Answer 4 · answered Mar 04 '16 at 05:26

I created a fork of Pete's version that retains the same sort of unobtrusive functionality but, in addition, stores a copy of the normal console and logs to it as well.

(function() {
    // Store a copy of the old console, but don't junk up the
    // global namespace with it either. This allows console
    // logging in both places.
    var oldConsole = console;

    // Use a pre-existing #console element or create a new one.
    var newConsole = document.getElementById("console") || (function() {
        var pre = document.createElement('pre');
        pre.setAttribute('id', 'console');
        document.body.insertBefore(pre, document.body.firstChild);
        return pre;
    })();

    console = {
        log: function (message) {
            var message = ['>', message, '\n'].join(' ');

            // Log to both consoles...
            oldConsole.log(message);
            newConsole.textContent += message;
        }
    };
})();

console.log("This is an unobtrusive version!");
console.log("Hello World!");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Make it scrollable!");

You can see a working version of it here: http://jsfiddle.net/Lanlost/7n6jka2q/

How can I output results to the 'result' window in JSFiddle?

4 Answers4