Imprimir Var no JsFiddle

200

Como imprimir algo na tela de resultados no JsFiddle a partir do meu JavaScript. Não posso usar document.write(), também não permite print.

O que devo usar?

aritroper
fonte
3
Confira este exemplo. jsfiddle.net/jadiagaurang/m58Rn
Gaurang Jadia
@GaurangJadia Isso é útil, você deve adicioná-lo como resposta (o único problema é console.log()aceitar argumentos de maneira diferente da sua função personalizada).
IQAndreas
Esta é essencialmente uma necessidade de console.log () ...
Evan Carroll
1
Possível duplicata Como chegar consola dentro jsFiddle
Evan Carroll
Hoje em dia o jsfiddle permite o uso de document.write ()
Rubén

Respostas:

499

Para poder ver a saída do console.log()JSFiddle, acesse Recursos externos no painel esquerdo e adicione o seguinte link para o Firebug:

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

Exemplo do resultado após adicionar o firebug-lite-debug.js

davidkelleher
fonte
10
Resposta fabulosa. Divide basicamente o painel de saída em dois painéis.
Jack
2
Exatamente o que eu estava procurando!
Pratyush 30/09/14
44
Eu gostaria que o JSFiddle fizesse isso por padrão, ou pelo menos tivesse uma caixa de seleção muito óbvia para habilitá-lo com um clique.
Lily Finley
5
o console só aparece depois que você executa o código pela primeira vez! ótima resposta btw!
Peter Piper
4
Existe algo assim para o Chrome? Na verdade, o JSFiddle deve suportar algo assim imediatamente, seria bastante útil.
Harshay Buradkar
67

Eu tenho um modelo para esse fim ; aqui está o código que eu 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 amostra (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());
IQAndreas
fonte
E para imprimir corretamente objetos ... out (JSON.stringify (myObject, null, 2));
Andrew Lank
Observe que isso terá problemas com caracteres '<' ou '>' sem escape e que também ocorrerá quando os valores dos argumentos forem <não definidos>. Isso pode não ser um problema para o seu caso de uso, mas algo a ter em atenção ao substituir chamadas para console.log ().
Steve Hollasch
Versão aprimorada: usa em innerTextvez de innerHTMLe também envia o log para o console original: 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) Exemplo do
JSFiddle
De alguma forma, isso não mostra nada para mim ao tentar no jsfiddle. :(
Suma
@Suma Hm, pode haver um erro de JavaScript. Ele funciona bem na minha máquina, mas você pode estar usando uma versão diferente. Tente abrir o console de depuração e procurar erros (certifique-se de acertar o Run botão no canto superior esquerdo quando fazê-lo)
IQAndreas
39

Experimentar:

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

Fiddle: http://jsfiddle.net/HKhw8/

Armadilha de chama
fonte
2
Você pode usar document.getElementById('element').innerHTML += [stuff here] + "<br/>";se quiser ter várias linhas e adicionar informações à página, em vez de apenas substituir as informações antigas.
IQAndreas
27

Pode não fazer o que você faz, mas você pode digitar

console.log(string)

E imprimirá a string no console do seu navegador . No chrome, pressione CTRL+ SHIFT+ Jpara abrir o console.

Euphe
fonte
3
Ou você pode usar CTRL+ SHIFT+ Kse quiser que o console seja encaixado na parte inferior da página, em vez de flutuar em uma janela separada.
IQAndreas
8

Você pode fazer isso ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable); 
Mohammad Adil
fonte
1
Hhmmm, não funciona ... como eu ia imprimir texto simples juntamente com uma variável
aritroper
7

Agora, o jsfiddle pode fazer isso do zero. Vá para Javascrpt -> Estruturas e extensões -> Jquery (borda) e marque a caixa de seleção Firebug lite

vkabachenko
fonte
Mas eu perco a sintaxe destacando com isso :(
Chintan Pathak
5

document.body.innerHTML = "Seus dados";

Igor Vaschuk
fonte
Melhor ainda, faça um + = para acrescentar. Ou seja::document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";
Michael Zlatkovsky - Microsoft
4

Com o ES6, truques podem ser

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

Adicionar apenas

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

em HTML

JohnPan
fonte
0

Apenas para adicionar algo que pode ser útil para algumas pessoas ...

Se você adicionar o console do depurador, como mostrado acima, poderá acessar o escopo executando o seguinte:

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

Acho que inspecionar o escopo diretamente é mais fácil do que console.log, alert () etc.

Neph
fonte
você tem um exemplo de uso, eu não sigo?
wide_eyed_pupil
Não sei por que respondi com uma resposta angular, acho que é um tópico errado.
Neph 17/06/16
0

Se você estiver usando JSfiddle, poderá usar esta biblioteca: https://github.com/IonicaBizau/console.js

Inclua um rawgit da lib nos recursos do jsfiddle: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Então você pode simplesmente adicionar isso no HTML:
<pre class="console"></pre>

Inicialize o console em seu JS:
ConsoleJS.init({selector: "pre.console"});

Exemplo de uso: Veja no 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
fonte
-4

Use a alert()função:

alert(variable name);
alert("Hello World");
Ashutosh Jha
fonte
1
alerta nunca é uma boa depuração ferramenta - não mostra objetos, interrupções comportamento do código, etc etc
Muers