javascript 如何将结果输出到 JSFiddle 中的“结果”窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22867510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I output results to the 'result' window in JSFiddle?
提问by davidkelleher
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?
我试过使用，console.log()但我需要在 chrome 中打开开发人员窗口才能看到输出。
Alert()写入弹出框。我想输出到 JSFiddle 中的结果窗口（右下窗格）。谁能告诉我吗？
Updated with a visual of answer by JajaDrinker - thanks for this.
更新了 JajaDrinker 的答案视觉效果 - 谢谢你。
回答by JajaDrinker
Add this to the HTML section:
将此添加到 HTML 部分：
<div id="console-log"></div>
Add this to the JavaScript section:
将此添加到 JavaScript 部分：
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:
或者，将其添加到 CSS 以使其更加用户友好：
.console-line
{
font-family: monospace;
margin: 2px;
}
You can see an example here.
回答by Pete
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.
这是一个不显眼的解决方案，因此您无需修改 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(' ');
}
};
回答by Bill H
The way I do it is add https://getfirebug.com/firebug-lite-debug.jsas an external script.
我这样做的方法是将https://getfirebug.com/firebug-lite-debug.js添加为外部脚本。
回答by Brent Rittenhouse
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.
我创建了一个 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!");
You can see a working version of it here: http://jsfiddle.net/Lanlost/7n6jka2q/
你可以在这里看到它的工作版本：http: //jsfiddle.net/Lanlost/7n6jka2q/
