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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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/