Cómo obtener la consola dentro de jsfiddle

¿Cómo puedo hacer que la consola se muestre en un violín en JSfiddle.com?

Recientemente vi un violín que tenía la consola incrustada en el violín, ¿alguien sabe cómo se puede hacer esto?

1. Expanda el panel de JavaScript
2. Seleccione jQuery Edge
3. Seleccione Firebug Lite .

Que debería agregar una consola en línea al final de la pestaña de resultados

bastante simple ..

ejemplo

github

Simplemente agregue la siguiente URL a los Recursos externos en jsfiddle, verá console.log y console.error en la pantalla de resultados.

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js

• haga clic en esa flecha junto a JavaScript
• y como MARCOS Y EXTENSIONES, seleccione No-Libary (Pure JS)
• pega tu console.log('foo');en JS box
• bajo Recursos agregarhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
  • o: en Recursos agreguehttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• y ejecuta tu script presionando el botón Reproducir

No pude encontrar ninguna opción para seleccionar la extensión Firebug en la opción de engranaje de JavaScript, y no quería agregar enlaces / bibliotecas externos, pero hay otra solución simple .

Puede utilizar la consola integrada de su navegador

funciona bien ... aquí

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

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

Ninguna de las soluciones anteriores funcionó para mí, ya que necesitaba una consola interactiva para poder establecer dinámicamente una variable al probar la reactividad en Vue.js.

Así que me cambié a Codepen , que tiene una consola interactiva dirigida a su aplicación.

Hay varias formas de incrustar una consola virtual dentro de cualquier página web ...

1. ^{Demostración del} depurador de Firebug Lite

Incluya el siguiente script de Firebug Lite , servido a través de raw.githack.com :

https://rawcdn.githack.com/firebug/firebug-lite/firebug1.5/build/firebug-lite-debug.js

2. ^{Demostración de la} consola virtual de fragmentos de pila

Incluya la siguiente secuencia de comandos de / u / canon , utilizada en Stack Snippets :

https://stacksnippets.net/scripts/snippet-javascript-console.min.js

3. Añadir jsFiddle consola ^{de demostración}

Incluya el siguiente script de eu81273 , servido a través de raw.githack.com :

https://raw.githack.com/eu81273/jsfiddle-console/master/console.js

4. Roll You Own

Aquí hay una implementación trivial que envuelve la console.logllamada existente y luego descarga los argumentos embellecidos usando :document.write

var oldLog = window.console.log
window.console.log = function(...args) {
    document.write(JSON.stringify(args, null, 2));
    oldLog.apply(this, args);
}

console.log("String", 44, {name: "Kyle", age: 30}, [1,2,3])

Otras lecturas

• Imprimir Var en JsFiddle

Para referencia futura: la jsfiddle-console de answer era exactamente lo que necesitaba al impartir una clase sobre JavaScript. Sin embargo, me pareció demasiado limitado para ser de utilidad real en esta situación. Así que hice el mío.

Quizás sirva a cualquiera aquí.

Simplemente agregue la versión CDN a los recursos de jsFiddle:

https://unpkg.com/html-console-output

Ejemplo aquí: https://jsfiddle.net/Brutac/e5nsp2mu/

GitHub: https://github.com/karimayachi/html-console-output

Puede que llegue tarde a la fiesta, pero solo quería mencionar que JSfiddle acaba de lanzar la nueva función de consola. Simplemente enciéndalo en la Configuración si no funciona para usted.

Todavía en beta pero bueno ... no más soluciones molestas.