web-dev-qa-db-fra.com

Comment obtenir la console dans jsfiddle

Comment puis-je faire en sorte que la console se montre violemment sur JSfiddle.com?

J'ai récemment vu un violon intégrant la console dans le violon. Quelqu'un sait-il comment cela peut être fait?

javascriptconsolejsfiddle
84
Adam Buchanan Smith
  1. Développez le panneau JavaScript
  2. Sélectionnez jQuery Edge
  3. Sélectionnez Firebug Lite .

Example of Settings

Ce qui devrait ajouter une console intégrée au bas de l'onglet de résultats

Example of Output

71
CodeBroJohn

assez simple ..

exemple

github

Ajoutez simplement l'URL suivante aux ressources externes dans jsfiddle. Vous verrez alors console.log et console.error dans l'écran des résultats.

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
64
user1855278
  • cliquez sur cette flèche à côté de JavaScript
  • et comme FRAMEWORKS & EXTENSIONS , sélectionnez aucune bibliothèque (JS pure)
  • collez votre console.log('foo'); dans la boîte JS
  • sous Ressources ajouter https://rawgit.com/eu81273/jsfiddle-console/master/console.js
    • ou: sous Ressources ajouter https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
  • et lancez votre script en appuyant sur ce bouton de lecture

24
player0

fonctionne bien ... ici

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

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

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

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

Dev Tools Console

11
Amrit Gautam

Aucune des solutions ci-dessus ne fonctionnait pour moi, car j'avais besoin d'une console interactive pour pouvoir définir de manière dynamique une variable lors du test de réactivité dans Vue.js.

Donc je suis passé à Codepen , qui a une ne console interactive étendue à votre application.

CodePen Example

2
Mudo

Il y a plusieurs façons d'intégrer une console virtuelle dans une page Web ...

1. Débogueur Firebug Lite démo

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

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

firebug

2. Console virtuelle Stipp Snippets démo

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

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

Stack Snippets

3. Ajouter la console jsFiddle démo

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

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

jsFiddle Console

4. Rouler vous possédez

Voici une implémentation triviale qui encapsule l'appel _console.log_ existant, puis supprime le prettifiéarguments à l'aide de _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

1
KyleMit