如何在JSFiddle中将结果输出到“result”窗口？

Question

我尝试使用console.log()，但是我需要在Chrome中打开开发人员窗口才能看到输出结果。 alert()会将内容写入弹出框中。 我想要将内容输出到JSFiddle的结果窗口（右下角面板）。请问有人知道吗？

JajaDrinker提供了一个可视化的答案，更新如下图所示：

- davidkelleher

---

我们可以看到一些代码吗？只是为了查找问题。这可能涉及很多事情，而找到产生错误的代码示例并不容易^^ - JajaDrinker

也许是console.log？ - snowYetis

结果窗口就像浏览器渲染的一样。如果您想要打印到它，您需要创建一个HTML元素并填充它的文本。我想你不需要添加一个元素，但这与在浏览器中打印是相同的。 - Rudy Garcia

可能是[如何在jsfiddle中获取控制台]的重复问题(https://dev59.com/jlkT5IYBdhLWcg3wD7Zb)。 - Evan Carroll

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;
}

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

- JajaDrinker

---

使用 text = typeof text === 'object' ? JSON.stringify(text) : text 可以节省一些时间，不必担心您输入的日志覆盖内容。 - zamnuts

Answer 2

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

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 示例。
• 这里有一个版本，可以作为大型项目的外部JS模块进行捆绑。

- Pete

Answer 3

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

- Bill H

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/

- Brent Rittenhouse