如何将结果输出到＆＃39;结果＆＃39; JSFiddle中的窗口？

Question

我尝试过使用console.log()，但我需要在chrome中打开开发人员窗口以查看输出。 Alert()写入弹出框。 我想输出到JSFiddle中的结果窗口（右下方窗格）。有人能告诉我吗？

更新了JajaDrinker的答案 - 感谢您的支持。

Answer 1

将其添加到HTML部分：

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

将其添加到JavaScript部分：

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

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

（可选）将其添加到CSS中以使其更加用户友好：

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

您可以看到example here。

Answer 2

这是一个不显眼的解决方案，因此您无需修改​​HTML。我使用了预标签，但您可以使用任何您想要的标签。

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(' ');
    }
};

• 使用CSS样式的示例JSFiddle。
• 这是一个version，可以捆绑为更大项目的外部js模块。

Answer 3

我这样做是将https://getfirebug.com/firebug-lite-debug.js添加为外部脚本。

Answer 4

我创建了一个Pete的版本的分支，它保留了相同的不显眼的功能，但是，另外，还存储了普通控制台的副本和日志。

(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!");

你可以在这里看到它的工作版本： http://jsfiddle.net/Lanlost/7n6jka2q/