如何將結果輸出到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作爲外部腳本。