Como obter o console dentro do jsfiddle


104

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?


2
Alguma chance de o violino ter feito algo assim? jsfiddle.net/FL4XL
JonSG

3
@VtoCorleone isso é o que eu queria jsfiddle.net/c42vd3m9/1 CodeBroJohn respondeu. Muito útil
Adam Buchanan Smith

1
Estou votando para fechar esta questão como fora do tópico porque se trata de um serviço da web
Evan Carroll

1
@EvanCarroll JS Fiddle é uma ferramenta de software comumente usada por programadores, por isso está no tópico deste site. Ref. centro de ajuda .
Rubén

1
Esta questão não está clara o suficiente quando eu pesquisei isso. Eu só queria uma solução JavaScript, não um console de biblioteca específico usando jQuery. Isso não é uma coisa ruim; no entanto, talvez inclua mais informações, como sua referência jsfiddle à questão.
Dalton

Respostas:


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

Exemplo de configurações

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

Exemplo de saída


19
deve simplesmente ser incluído que você precisa ter seu javascript definido para usar a biblioteca jQuery edge ou um subconjunto do jQuery para ver a opção firebug lite, caso contrário, não aparecerá prontamente.
Tope

4
A resposta abaixo parece uma solução melhor se você não quiser usar JQuery.
Robert

Esta solução requer que você use jQuery, não vanilla JavaScript.
Dalton

95

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

eu estava procurando por isso e isso faz o trabalho. Embora para visualizar o gráfico do objeto no log, em vez de [objeto Object], basta pressionar F12 e ver os logs no console do navegador.
cirovladimir

1
ótimo! embora ainda esteja imprimindo o feio [objeto objeto] e imprima três pontos para objetos aninhados. No entanto, é muito útil em alguns casos. Estou usando o console do navegador da web agora.
cirovladimir

isso é verdadeiro apenas para HTML vazio (apenas javascript)
ng10

32
  • 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


3
O GIF é muito útil.
AlexMelw

1
@Ruben, exceto que esta resposta apareceu antes do mais votado, então merece o crédito! + o gif realmente ajuda !!
Anshuman Manral

15

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

Dev Tools Console


1
Estou surpreso ao ver como essa resposta foi rejeitada. A resposta parece ser bastante realista, simples e não redundante. Alguma explicação ?? Pelo menos, estou tentando sugerir outras alternativas e soluções possíveis.
Amrit Gautam,

1
Lamento que o downvote esteja perturbando você. Votar negativamente não tem nada a ver com o seu método - é porque essa não é uma resposta à pergunta. É uma sugestão de alternativa e que seria melhor posicionada como um comentário à pergunta do OP. Não posso remover o downvote, a menos que você atualize a resposta e só o removeria se a atualização respondesse à pergunta ou fornecesse um conjunto razoável de razões pelas quais esse método é uma opção viável acima do que o OP pediu.
William Patton

Usando o console integrado do navegador, posso ver os resultados console.log()conforme você demonstra, mas ainda não consigo interagir com as variáveis ​​no jsfiddle. Há alguma forma de fazer isso?
Krubo

2
Vote positivamente, porque também não vejo a opção para a extensão do firebug, a solução mais simples é apenas pressionar F12
GabrielMSC

1
@AnshumanManral Eu não me importo com quando e onde estará lá, até que a solução funcione. Eu não vejo nenhuma razão para downvote embora!
Amrit Gautam

14

funciona bem ... aqui

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

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

1
Obrigado por sua resposta, sua resposta literalmente responde o que eu estava perguntando, mas não fui claro na minha pergunta, então vou te dar um +1, aqui está um link para um violino que mostra o que eu estava falando jsfiddle.net / c42vd3m9 / 1
Adam Buchanan Smith

3

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.

Exemplo CodePen


Também percebi que não conseguia interagir com o DOM usando jQuery e o console do navegador nativo no Js Fiddle. Com CodePen, fui capaz de abrir o console nativo e selecionar meus elementos html usando seletores jQuery.
nflauria

3

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

firebug

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

Stack Snippets

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

Console jsFiddle

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



0

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ê.

insira a descrição da imagem aqui

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.