Come posso produrre risultati nella finestra 'risultato' in JSFiddle?

Question

Ho provato a utilizzare console.log() ma ho bisogno di avere la finestra dello sviluppatore aperta in chrome per vedere l'output. Alert() scrive nella casella pop-up. Voglio uscire alla finestra dei risultati (riquadro in basso a destra) in JSFiddle. Qualcuno può dirmi per favore?

Aggiornato con una visuale di risposta di JajaDrinker - grazie per questo.

Answer 1

Aggiungere questo alla sezione HTML:

<div id="console-log"></div> 

Aggiungere questo alla sezione JavaScript:

var consoleLine = "<p class=\"console-line\"></p>"; 

console = { 
    log: function (text) { 
     $("#console-log").append($(consoleLine).html(text)); 
    } 
}; 

Facoltativamente, aggiungere questo al CSS per renderlo più user friendly :

.console-line 
{ 
    font-family: monospace; 
    margin: 2px; 
} 

È possibile visualizzare un example here.

Answer 2

Ecco una soluzione discreta, quindi non sarà necessario modificare il codice HTML. Ho usato un tag pre, ma puoi usare qualsiasi tag che vuoi.

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

• Esempio JSFiddle con stile CSS.
• Questo è un version che può essere fornito in bundle come modulo js esterno per un progetto più grande.

Answer 3

ho creato un fork della versione di Pete che mantiene lo stesso tipo di funzionalità discreto ma, in aggiunta, memorizza una copia della console normale e tronchi ad esso pure.

(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!"); 

si può vedere una versione funzionante di qui: http://jsfiddle.net/Lanlost/7n6jka2q/

Answer 4

Il modo in cui lo faccio è aggiungere https://getfirebug.com/firebug-lite-debug.js come uno script esterno.