Imprimir Var en JsFiddle

200

¿Cómo imprimiría algo en la pantalla de resultados en JsFiddle desde mi JavaScript? No puedo usar document.write(), tampoco lo permite print.

¿Qué debo usar?

javascript jsfiddle

— aritroper
fuente

3

Mira este ejemplo. jsfiddle.net/jadiagaurang/m58Rn

— Jadia

@GaurangJadia Eso es útil, debe agregarlo como respuesta (el único problema es console.log()aceptar argumentos de manera diferente a su función personalizada).

— IQAndreas

Esto es esencialmente una necesidad de console.log () ...

— Evan Carroll

1

Posible duplicado de Cómo obtener la consola dentro de jsfiddle

— Evan Carroll

Hoy en día jsfiddle permite el uso de document.write ()

— Rubén

499

Para poder ver la salida desde console.log()JSFiddle, vaya a Recursos externos en el panel del lado izquierdo y agregue el siguiente enlace para Firebug:

https://getfirebug.com/firebug-lite-debug.js

Ejemplo del resultado después de agregar firebug-lite-debug.js

— davidkelleher
fuente

10

Fabulosa respuesta Básicamente divide el panel de salida en dos paneles.

— Jack

2

¡Exactamente lo que estaba buscando!

— Pratyush

44

Desearía que JSFiddle hiciera esto por defecto, o al menos tenga una casilla de verificación muy obvia para habilitarlo con un solo clic.

— Lily Finley

55

¡la consola solo aparece después de haber ejecutado el código por primera vez! gran respuesta por cierto!

— Peter Piper

44

¿Hay algo así para Chrome? En realidad, JSFiddle debería admitir algo como esto fuera de la caja, sería bastante útil.

— Harshay Buradkar

67

Tengo una plantilla para este propósito ; Aquí está el código que uso:

HTML

<pre id="output"></pre>

JavaScript

function out()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

Uso de muestra (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());

— IQAndreas
fuente

Y para imprimir objetos de impresión ... out (JSON.stringify (myObject, null, 2));

— Andrew Lank

Tenga en cuenta que esto tendrá problemas con los caracteres '<' o '>' sin escape, y que también vomitará cuando los valores de los argumentos estén <indefinidos>. Esto puede no ser un problema para su caso de uso, sino algo a tener en cuenta al reemplazar las llamadas a console.log ().

— Steve Hollasch

Versión mejorada: utiliza en innerTextlugar de innerHTMLy envía el registro a la consola original también:

function newLog(oldLog) {   return function() {     var args = Array.prototype.slice.call(arguments, 0);     document.getElementById('console-log').innerText += args.join(" ") + "\n";     oldLog.apply(this, args)   } } console.log = newLog(console.log) console.error = newLog(console.error)

ejemplo de

— JSFiddle

De alguna manera, esto no me muestra nada cuando intento en jsfiddle. :(

— Suma

@Suma Hm, puede haber un error de JavaScript. Funciona bien en mi máquina, pero es posible que esté utilizando una versión diferente. Intente abrir la consola de depuración y busque errores (asegúrese de presionar el botón Ejecutar en la esquina superior izquierda al hacerlo)

— IQAndreas

39

Tratar:

document.getElementById('element').innerHTML = ...;

Violín: http://jsfiddle.net/HKhw8/

— Trampa de llamas
fuente

2

Puede usarlo document.getElementById('element').innerHTML += [stuff here] + "<br/>";si desea tener varias líneas y agregar información a la página, en lugar de simplemente reemplazar la información anterior.

— IQAndreas

27

Puede que no hagas lo que haces, pero puedes escribir

console.log(string)

E imprimirá la cadena en la consola de su navegador . En cromo, presione CTRL+ SHIFT+ Jpara abrir la consola.

— Euphe
fuente

3

O puede usar CTRL+ SHIFT+ Ksi desea que la consola esté acoplada en la parte inferior de la página, en lugar de flotar en una ventana separada.

— IQAndreas

8

Puedes hacer esto ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable);

— Mohammad Adil
fuente

1

Hhmmm, no funciona ... ¿cómo imprimiría texto simple junto con una variable

— Aritroper

7

Ahora jsfiddle puede hacerlo desde cero. Simplemente vaya a Javascrpt -> Marcos y extensiones -> Jquery (borde) y marque la casilla de verificación Firebug lite

— vkabachenko
fuente

Pero pierdo el resaltado de sintaxis con esto :(

— Chintan Pathak

5

document.body.innerHTML = "Sus datos";

— Igor Vaschuk
fuente

Mejor aún, haga un + = para agregar. Es decir,document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";

— Michael Zlatkovsky - Microsoft

4

Con ES6 los trucos podrían ser

function say(...args)
{ 
    document.querySelector('#out').innerHTML += args.join("</br>");
}
say("hi","john");

Agregar solo

 <span id="out"></span>

en HTML

— JohnPan
fuente

3

Aquí hay una alternativa: http://jsfiddle.net/skibulk/erh7m9og/1/

document.write = function (str) {
    document.body.insertAdjacentHTML("beforeend", str);
}

document.write("¡hola mundo");

— skibulk
fuente

0

Solo para agregar algo que podría ser útil para algunas personas ...

Si agrega la consola del depurador como se muestra arriba, puede acceder al alcance ejecutando esto:

scope = angular.element (document.querySelector ('[ng-controller = MyCtrl]')). scope ();

Encuentro inspeccionar el alcance directamente más fácil que console.log, alert (), etc.

— Neph
fuente

¿tiene un ejemplo de uso, no lo sigo.

— wide_eyed_pupil

No tengo idea de por qué respondí con una respuesta angular, hilo equivocado, supongo.

— Neph

0

Si está utilizando JSfiddle, puede usar esta biblioteca: https://github.com/IonicaBizau/console.js

Agregue un rawgit de la lib a sus recursos jsfiddle: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Luego puede agregar esto en el HTML:
<pre class="console"></pre>

Inicialice la consola en su JS:
ConsoleJS.init({selector: "pre.console"});

Ejemplo de uso: Véalo en jsfiddle

ConsoleJS.init({selector: "pre.console"});

let b;

console.log('hello world');
console.log([{'a':10,'b':44}]);
console.log(typeof [1,2,3,4]);
console.log(50 +67);
console.log(b);

— Emmanuel NK
fuente

-4

Usa la alert()función:

alert(variable name);
alert("Hello World");

— Ashutosh Jha
fuente

1

alerta nunca es una buena herramienta de depuración - no muestra los objetos, las interrupciones comportamiento del código, etc, etc

— Muers