Come ottenere la console all'interno di jsfiddle


104

Come posso fare in modo che la console venga visualizzata in un violino su JSfiddle.com?

Recentemente ho visto un violino che aveva la console incorporata nel violino, qualcuno sa come si può fare?


2
C'è qualche possibilità che il violino abbia fatto qualcosa del genere? jsfiddle.net/FL4XL
JonSG

3
@VtoCorleone questo è quello che volevo jsfiddle.net/c42vd3m9/1 CodeBroJohn ha risposto. Super utile
Adam Buchanan Smith

1
Voto per chiudere questa domanda come fuori tema perché si tratta di un servizio web
Evan Carroll

1
@EvanCarroll JS Fiddle è uno strumento software comunemente utilizzato dai programmatori, quindi è in argomento su questo sito. Ref. centro assistenza .
Rubén

1
Questa domanda non è abbastanza chiara quando ho cercato questo volevo solo una soluzione JavaScript, non una console di libreria specifica che utilizza jQuery. Questa non è una brutta cosa; tuttavia, potresti includere più informazioni come il riferimento jsfiddle alla domanda.
Dalton

Risposte:


74
  1. Espandi il pannello JavaScript
  2. Seleziona jQuery Edge
  3. Seleziona Firebug Lite .

Esempio di impostazioni

Che dovrebbe aggiungere una console in linea nella parte inferiore della scheda dei risultati

Esempio di output


19
dovrebbe semplicemente essere incluso che devi avere il tuo javascript impostato per utilizzare la libreria jQuery edge o un sottoinsieme di jQuery per vedere l'opzione firebug lite, altrimenti non verrà visualizzato immediatamente.
Tope

4
La risposta qui sotto sembra una soluzione migliore se non vuoi usare JQuery.
Robert

Questa soluzione richiede l'utilizzo di jQuery, non di vanilla JavaScript.
Dalton

95

piuttosto semplice ..

esempio

github

Basta aggiungere il seguente URL a Risorse esterne in jsfiddle, vedrai console.log e console.error nella schermata dei risultati.

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

stavo cercando questo e questo fa il lavoro. Sebbene per visualizzare il grafico degli oggetti nel registro, invece di [Oggetto oggetto], basta premere F12 e vedere i registri nella console del browser.
cirovladimir

1
grande! sebbene stia ancora stampando il brutto [Object Object] e stampa tre punti per gli oggetti annidati. Tuttavia è molto utile in alcuni casi. Adesso però sto usando la console del browser web.
cirovladimir

questo è vero solo per HTML vuoto (solo javascript)
ng10

32
  • fare clic sulla freccia accanto a JavaScript
  • e come FRAMEWORKS & EXTENSIONS seleziona No-Libary (Pure JS)
  • incolla il tuo console.log('foo');nella casella JS
  • in Risorse aggiungihttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
    • oppure: in Risorse aggiungihttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
  • ed esegui lo script premendo il pulsante Riproduci


3
La gif è davvero utile.
AlexMelw

1
@Ruben, tranne per il fatto che questa risposta è apparsa prima che il primo votasse quindi merita il merito! + la gif aiuta davvero !!
Anshuman Manral

15

Non sono riuscito a trovare alcuna opzione per selezionare l'estensione Firebug nell'opzione dell'ingranaggio JavaScript e non volevo aggiungere collegamenti / librerie esterni, ma esiste un'altra semplice soluzione.

Puoi utilizzare la console integrata del tuo browser

Console degli strumenti di sviluppo


1
Sono sorpreso di vedere come questa risposta sia stata sottovalutata. La risposta sembra essere piuttosto realistica, semplice e non ridondante. Alcuna spiegazione?? Almeno sto cercando di suggerire altre alternative e possibili soluzioni.
Amrit Gautam

1
Mi dispiace che il voto negativo ti stia sconvolgendo. Downvote non ha nulla a che fare con il tuo metodo, è perché questa non è una risposta alla domanda. È un suggerimento di un'alternativa e sarebbe meglio posizionarlo come commento alla domanda OP. Non posso rimuovere il voto negativo a meno che non aggiorni la risposta e lo rimuoverò solo se l'aggiornamento rendesse questa una risposta alla domanda o fornisse una serie ragionevole di motivi per cui questo metodo è un'opzione praticabile sopra quella richiesta da OP.
William Patton

Utilizzando la console incorporata del browser, posso vedere i risultati di console.log()come hai dimostrato, ma non riesco ancora a interagire con le variabili nel jsfiddle. C'è modo di farlo?
krubo

2
Voto positivo, perché non vedo nemmeno l'opzione per l'estensione firebug, la soluzione più semplice è semplicemente
premere

1
@AnshumanManral Non mi interessa quando e dove sarà disponibile, finché la soluzione non funziona. Non vedo alcun motivo per downvote però!
Amrit Gautam

14

funziona bene ... qui

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

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

1
Grazie per la tua risposta, la tua risposta risponde letteralmente a quello che stavo chiedendo ma non ero chiaro sulla mia domanda, quindi ti darò un plus 1, ecco un link a un violino che mostra di cosa stavo parlando jsfiddle.net / c42vd3m9 / 1
Adam Buchanan Smith

3

Nessuna delle soluzioni di cui sopra ha funzionato per me, poiché avevo bisogno di una console interattiva per essere in grado di impostare dinamicamente una variabile durante il test della reattività in Vue.js.

Quindi sono passato a Codepen , che ha una console interattiva con ambito per la tua applicazione.

CodePen Esempio


Ho anche notato che non ero in grado di interagire con il DOM utilizzando jQuery e la console del browser nativa in Js Fiddle. Con CodePen sono stato in grado di aprire la console nativa e selezionare i miei elementi html utilizzando i selettori jQuery.
nflauria

3

Esistono diversi modi per incorporare una console virtuale all'interno di qualsiasi pagina web ...

1. Demo del debugger di Firebug Lite

Includi il seguente script di Firebug Lite , fornito tramite raw.githack.com :

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

firebug

2. Stack Snippets Demo della console virtuale

Includere il seguente script da / u / canon , utilizzato in Stack Snippet :

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

Stack Snippet

3. Aggiungi jsFiddle Console Demo

Includere il seguente script da eu81273 , pubblicato tramite raw.githack.com :

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

jsFiddle Console

4. Roll You Own

Ecco un'implementazione banale che avvolge la console.logchiamata esistente e quindi scarica gli argomenti ottimizzati 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])

Ulteriori letture


1

Per riferimento futuro: la jsfiddle-console di answer era esattamente ciò di cui avevo bisogno quando insegnavo a una classe su JavaScript. Tuttavia ho trovato che fosse troppo limitato per essere di qualsiasi uso effettivo in questa situazione. Quindi ho fatto il mio.

Forse servirà a chiunque qui.

Basta aggiungere la versione CDN alle risorse di jsFiddle:

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

Esempio qui: https://jsfiddle.net/Brutac/e5nsp2mu/

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


0

Potrei essere in ritardo alla festa, ma volevo solo menzionare che JSfiddle ha appena rilasciato la nuova funzionalità per console. Basta accenderlo nelle Impostazioni se non funziona per te.

inserisci qui la descrizione dell'immagine

Ancora in beta ma ehi ... niente più fastidiose soluzioni alternative.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.