Como obter o console dentro do jsfiddle

Como posso fazer com que o console apareça como um violino em JSfiddle.com?

Recentemente vi um violino que tinha o console embutido no violino, alguém sabe como isso pode ser feito?

1. Expanda o painel JavaScript
2. Selecione jQuery Edge
3. Selecione Firebug Lite .

Que deve adicionar um console embutido na parte inferior da guia de resultados

bem simples ..

exemplo

github

Basta adicionar a seguinte URL a Recursos externos em jsfiddle, você verá console.log e console.error na tela de resultados.

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

• clique na seta ao lado de JavaScript
• e como FRAMEWORKS & EXTENSIONS selecione No-Libary (Pure JS)
• cole seu console.log('foo');na caixa JS
• em Recursos adicionarhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
  • ou: em Recursos, adicionehttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• e execute o seu script clicando no botão Play

Não consegui encontrar nenhuma opção para selecionar a extensão Firebug na opção de engrenagem JavaScript e não queria adicionar links / bibliotecas externas, mas há outra solução simples .

Você pode usar o console integrado do seu navegador

funciona bem ... aqui

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

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

Nenhuma das soluções acima funcionou para mim, já que eu precisava de um console interativo para ser capaz de definir dinamicamente uma variável ao testar a reatividade em Vue.js.

Então, mudei para o Codepen , que tem um console interativo com escopo para seu aplicativo.

Existem várias maneiras de incorporar um console virtual dentro de qualquer página da web ...

1. Firebug Lite Debugger ^Demo

Inclua o seguinte script do Firebug Lite , veiculado via raw.githack.com :

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

2. Stack Snippets Virtual Console ^Demo

Inclua o seguinte script de / u / canon , usado em Stack Snippets :

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

3. Adicione jsFiddle Console ^Demo

Inclua o seguinte script de eu81273 , veiculado via raw.githack.com :

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

4. Role o que você possui

Aqui está uma implementação trivial que envolve a console.logchamada existente e, em seguida, descarta os argumentos pretensificados 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])

Leitura Adicional

• Imprimir Var em JsFiddle

Para referência futura: o jsfiddle-console de answer era exatamente o que eu precisava ao dar uma aula sobre JavaScript. No entanto, achei que era muito limitado para ter qualquer uso real nesta situação. Então eu fiz o meu.

Talvez sirva a alguém aqui.

Basta adicionar a versão CDN aos recursos do jsFiddle:

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

Exemplo aqui: https://jsfiddle.net/Brutac/e5nsp2mu/

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

Posso estar atrasado para a festa, mas só queria mencionar que o JSfiddle acaba de lançar o novo recurso do console. Basta ligá-lo nas configurações se não funcionar para você.

Ainda em beta, mas hey ... sem mais soluções alternativas irritantes.