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?
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?
Risposte:
Che dovrebbe aggiungere una console in linea nella parte inferiore della scheda dei risultati
piuttosto semplice ..
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
console.log('foo');
nella casella JShttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
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.
console.log()
come hai dimostrato, ma non riesco ancora a interagire con le variabili nel jsfiddle. C'è modo di farlo?
funziona bene ... qui
var consoleLine = "<p class=\"console-line\"></p>";
console = {
log: function (text) {
$("#console-log").append($(consoleLine).html(text));
}
};
console.log("Hello Console")
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.
Esistono diversi modi per incorporare una console virtuale all'interno di qualsiasi pagina web ...
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
Includere il seguente script da / u / canon , utilizzato in Stack Snippet :
https://stacksnippets.net/scripts/snippet-javascript-console.min.js
Includere il seguente script da eu81273 , pubblicato tramite raw.githack.com :
https://raw.githack.com/eu81273/jsfiddle-console/master/console.js
Ecco un'implementazione banale che avvolge la console.log
chiamata 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])
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/
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.
Ancora in beta ma ehi ... niente più fastidiose soluzioni alternative.