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

• 样品JSFiddle用CSS样式。
• 这是一个version，它可以捆绑为一个大型项目的外部js模块。

Answer 3

我创建了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/

Answer 4

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