pagina - javascript online console

¿Cómo puedo generar resultados en la ventana ''resultado'' en JSFiddle?

Question

Intenté usar console.log() pero necesito tener la ventana del desarrollador abierta en chrome para ver el resultado. Alert() escribe en el cuadro emergente. Quiero hacer una salida a la ventana de resultados (panel inferior derecho) en JSFiddle. ¿Puede alguien decirme por favor?

Actualizado con una respuesta visual por JajaDrinker - gracias por esto.

Answer 1

Aquí hay una solución discreta, por lo que no necesitará modificar su HTML. Utilicé una etiqueta previa, pero puede usar cualquier etiqueta que desee.

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

• Muestra JSFiddle con estilo CSS.
• Aquí hay una versión que podría incluirse como un módulo js externo para un proyecto más grande.

Answer 2

Agregue esto a la sección HTML:

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

Agregue esto a la sección de JavaScript:

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

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

Opcionalmente, agregue esto al CSS para que sea más fácil de usar:

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

Puedes ver un ejemplo aquí .

Answer 3

Creé un tenedor de la versión de Pete que conserva el mismo tipo de funcionalidad discreta pero, además, almacena una copia de la consola y registros normales también.

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

Puede ver una versión de trabajo aquí: http://jsfiddle.net/Lanlost/7n6jka2q/

Answer 4

La forma en que lo hago es agregar https://getfirebug.com/firebug-lite-debug.js como un script externo.