Comment obtenir la console dans jsfiddle

Comment puis-je afficher la console dans un violon sur JSfiddle.com?

J'ai récemment vu un violon qui avait la console intégrée dans le violon, quelqu'un sait comment cela peut être fait?

1. Développez le panneau JavaScript
2. Sélectionnez jQuery Edge
3. Sélectionnez Firebug Lite .

Ce qui devrait ajouter une console en ligne au bas de l'onglet des résultats

assez simple ..

exemple

github

Ajoutez simplement l'URL suivante aux ressources externes dans jsfiddle, vous verrez console.log et console.error dans l'écran de résultats.

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

• cliquez sur cette flèche à côté de JavaScript
• et comme FRAMEWORKS & EXTENSIONS, sélectionnez No-Libary (Pure JS)
• collez votre console.log('foo');boîte dans JS
• sous Ressources ajouterhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
  • ou: sous Ressources, ajoutezhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• et exécutez votre script en appuyant sur ce bouton de lecture

Je n'ai trouvé aucune option pour sélectionner l'extension Firebug dans l'option d'engrenage JavaScript, et je ne voulais pas ajouter de liens / bibliothèques externes, mais il existe une autre solution simple .

Vous pouvez utiliser la console intégrée de votre navigateur

fonctionne bien ... ici

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

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

Aucune des solutions ci-dessus n'a fonctionné pour moi, car j'avais besoin d'une console interactive pour pouvoir définir dynamiquement une variable lors du test de réactivité dans Vue.js.

Je suis donc passé à Codepen , qui dispose d'une console interactive adaptée à votre application.

Il existe plusieurs façons d'intégrer une console virtuelle dans n'importe quelle page Web ...

1. ^{Démo du} débogueur Firebug Lite

Incluez le script suivant de Firebug Lite , servi via raw.githack.com :

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

2. ^{Démonstration de la} console virtuelle Stack Snippets

Incluez le script suivant de / u / canon , utilisé dans Stack Snippets :

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

3. Ajouter jsFiddle Console ^Demo

Incluez le script suivant de eu81273 , diffusé via raw.githack.com :

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

4. Roll You Own

Voici une implémentation triviale qui encapsule l' console.logappel existant , puis vide les arguments précisés en utilisant :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])

Lectures complémentaires

• Imprimer Var dans JsFiddle

Pour référence future: la console jsfiddle de answer était exactement ce dont j'avais besoin pour enseigner à un cours sur JavaScript. Cependant, je l'ai trouvé trop limité pour être réellement utile dans cette situation. Alors j'ai fait le mien.

Peut-être que cela servira n'importe qui ici.

Ajoutez simplement la version CDN aux ressources de jsFiddle:

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

Exemple ici: https://jsfiddle.net/Brutac/e5nsp2mu/

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

Je suis peut-être en retard à la fête, mais je voulais juste mentionner que JSfiddle vient de publier la nouvelle fonctionnalité de la console. Activez-le simplement dans les paramètres si cela ne fonctionne pas pour vous.

Toujours en version bêta mais bon ... plus de solutions de contournement ennuyeuses.