如何将结果输出到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;
}

你可以在这里看到一个例子.

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

• 示例JSFiddle与CSS样式.
• 这是一个可以捆绑为更大项目的外部js模块的版本.

Answer 3

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