Cómo obtener la consola dentro de jsfiddle

104

¿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?

Adam Buchanan Smith
fuente
2
¿Alguna posibilidad de que el violín haya hecho algo como esto? jsfiddle.net/FL4XL
JonSG
3
@VtoCorleone esto es lo que quería jsfiddle.net/c42vd3m9/1 CodeBroJohn lo respondió. Súper útil
Adam Buchanan Smith
1
Voy a votar para cerrar esta pregunta como fuera de tema porque se trata de un servicio web
Evan Carroll
1
@EvanCarroll JS Fiddle es una herramienta de software comúnmente utilizada por los programadores, por lo que está en el tema de este sitio. Árbitro. centro de ayuda .
Rubén
1
Esta pregunta no es lo suficientemente clara cuando busqué esto, solo quería una solución de JavaScript, no una consola de biblioteca específica usando jQuery. Esto no es algo malo; sin embargo, tal vez incluya más información como su referencia jsfiddle a la pregunta.
Dalton

Respuestas:

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

Ejemplo de configuración

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

Ejemplo de salida

CodeBroJohn
fuente
19
simplemente debe incluirse que necesita tener su javascript configurado para usar la biblioteca jQuery edge o un subconjunto de jQuery para ver la opción firebug lite, de lo contrario no se mostrará fácilmente.
Tope
4
La respuesta a continuación parece una mejor solución si no desea utilizar JQuery.
Robert
Esta solución requiere que utilice jQuery, no JavaScript vanilla.
Dalton
95

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
usuario1855278
fuente
Estaba buscando esto y esto hace el trabajo. Aunque para ver el gráfico de objetos en el registro, en lugar de [objeto Objeto], simplemente presione F12 y vea los registros en la consola del navegador.
cirovladimir
1
¡Excelente! aunque todavía está imprimiendo el feo [object Object] e imprime tres puntos para los objetos anidados. Sin embargo, es muy útil en algunos casos. Sin embargo, ahora estoy usando la consola del navegador web.
cirovladimir
esto es cierto solo para HTML vacío (solo javascript)
ng10
32
  • 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

jugador0
fuente
3
El gif es realmente útil.
AlexMelw
1
@Ruben, excepto que esta respuesta apareció antes de que la más votada, ¡merece el crédito! + ¡el gif realmente ayuda!
Anshuman Manral
15

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

Consola de herramientas de desarrollo

Amrit Gautam
fuente
1
Me sorprende ver cómo se rechaza esta respuesta. La respuesta parece ser bastante realista, simple y no redundante. ¿Alguna explicación? Al menos, intento sugerir otras alternativas y posibles soluciones.
Amrit Gautam
1
Lamento que el voto negativo te moleste. El voto negativo no tiene nada que ver con su método, es porque esta no es una respuesta a la pregunta. Es una sugerencia de una alternativa y estaría mejor ubicada como comentario a la pregunta de OP. No puedo eliminar el voto negativo a menos que actualice la respuesta y solo lo eliminaría si la actualización hiciera que esto fuera una respuesta a la pregunta o proporcionara un conjunto razonable de razones por las que este método es una opción viable por encima de lo que solicitó OP.
William Patton
Usando la consola incorporada del navegador, puedo ver los resultados de console.log()lo que demuestra, pero todavía no puedo interactuar con las variables en jsfiddle. ¿Hay alguna forma de hacerlo?
krubo
2
Voto a favor, porque tampoco veo la opción para la extensión firebug, la solución más simple es presionar F12
GabrielMSC
1
@AnshumanManral No me importa cuándo y dónde estará allí, hasta que la solución funcione. ¡No veo ninguna razón para rechazarlo!
Amrit Gautam
14

funciona bien ... aquí

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

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
console.log("Hello Console")
fernando
fuente
1
Gracias por su respuesta, su respuesta responde literalmente a lo que estaba preguntando pero no tuve claro mi pregunta, así que le daré un más 1, aquí hay un enlace a un violín que muestra de lo que estaba hablando jsfiddle.net / c42vd3m9 / 1
Adam Buchanan Smith
3

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.

Ejemplo de CodePen

Mudo
fuente
También noté que no podía interactuar con el DOM usando jQuery y la consola del navegador nativo en Js Fiddle. Con CodePen pude abrir la consola nativa y seleccionar mis elementos html usando selectores jQuery.
nflauria
3

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

chinche

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

Fragmentos de pila

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

jsFiddle Console

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

KyleMit
fuente
1

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

Karim Ayachi
fuente
0

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.

ingrese la descripción de la imagen aquí

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

Thielicious
fuente