Come ottenere la console all'interno di jsfiddle

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?

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

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

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

• 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

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

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

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

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

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

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

• Stampa Var in JsFiddle

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

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.