Imprimer Var dans JsFiddle


200

Comment imprimer quelque chose sur l'écran de résultat dans JsFiddle à partir de mon JavaScript. Je ne peux pas l'utiliser document.write(), ça ne le permet pas non plus print.

Que dois-je utiliser?


3
Découvrez cet exemple. jsfiddle.net/jadiagaurang/m58Rn
Gaurang Jadia

@GaurangJadia C'est pratique, vous devez l'ajouter comme réponse (le seul problème est d' console.log()accepter les arguments différemment de votre fonction personnalisée).
IQAndreas

C'est essentiellement un besoin de console.log () ...
Evan Carroll


De nos jours, jsfiddle autorise l'utilisation de document.write ()
Rubén

Réponses:


499

Pour pouvoir voir la sortie de console.log()JSFiddle, accédez aux ressources externes sur le panneau de gauche et ajoutez le lien suivant pour Firebug:

https://getfirebug.com/firebug-lite-debug.js

Exemple du résultat après l'ajout de firebug-lite-debug.js


10
Réponse fabuleuse. Divise fondamentalement le volet de sortie en deux volets.
Jack

2
Exactement ce que je cherchais!
Pratyush

44
Je souhaite que JSFiddle fasse cela par défaut, ou au moins ait une case à cocher très évidente pour l'activer en un seul clic.
Lily Finley

5
la console n'apparaît qu'après avoir exécuté le code pour la première fois! grande réponse btw!
Peter Piper

4
Existe-t-il quelque chose comme ça pour Chrome? En fait, JSFiddle devrait prendre en charge quelque chose comme ça hors de la boîte, ce serait très utile.
Harshay Buradkar

67

J'ai un modèle à cet effet ; voici le code que j'utilise:

HTML

<pre id="output"></pre>

Javascript

function out()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

Exemple d'utilisation (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());

Et pour imprimer des objets en primeur ... out (JSON.stringify (myObject, null, 2));
Andrew Lank

Notez que cela aura des problèmes avec les caractères "<" ou ">" non échappés, et qu'il s'égarera également lorsque les valeurs d'argument sont <non définies>. Ce n'est peut-être pas un problème pour votre cas d'utilisation, mais quelque chose à savoir lors du remplacement des appels à console.log ().
Steve Hollasch

Version améliorée: utilise à la innerTextplace de innerHTMLet envoie également le journal à la console d'origine: function newLog(oldLog) { return function() { var args = Array.prototype.slice.call(arguments, 0); document.getElementById('console-log').innerText += args.join(" ") + "\n"; oldLog.apply(this, args) } } console.log = newLog(console.log) console.error = newLog(console.error) exemple
JSFiddle

D'une certaine manière, cela ne me montre rien lorsque j'essaie dans jsfiddle. :(
Suma

@Suma Hm, il peut y avoir une erreur JavaScript. Cela fonctionne bien sur ma machine, mais vous utilisez peut-être une version différente. Essayez d'ouvrir la console de débogage et recherchez les erreurs (assurez-vous d' appuyer sur le bouton Exécuter dans le coin supérieur gauche lorsque vous le faites)
IQAndreas

39

Essayer:

document.getElementById('element').innerHTML = ...;

Violon: http://jsfiddle.net/HKhw8/


2
Vous pouvez utiliser document.getElementById('element').innerHTML += [stuff here] + "<br/>";si vous souhaitez avoir plusieurs lignes et ajouter des informations à la page, au lieu de simplement remplacer les anciennes informations.
IQAndreas

27

Peut ne pas faire ce que vous faites, mais vous pouvez taper

console.log(string)

Et il imprimera la chaîne dans la console de votre navigateur . En chrome, appuyez sur CTRL+ SHIFT+ Jpour ouvrir la console.


3
Ou vous pouvez utiliser CTRL+ SHIFT+ Ksi vous souhaitez que la console soit ancrée au bas de la page, au lieu de flotter dans une fenêtre séparée.
IQAndreas


7

Maintenant, jsfiddle peut le faire à partir de zéro. Allez simplement dans Javascrpt -> Frameworks & extensions -> Jquery (edge) et cochez la case Firebug lite


Mais je perds la coloration syntaxique avec ceci :(
Chintan Pathak

5

document.body.innerHTML = "Vos données";


Mieux encore, faites un + = pour ajouter. C'est à dire:document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";
Michael Zlatkovsky - Microsoft

4

Avec des astuces ES6 pourrait être

function say(...args)
{ 
    document.querySelector('#out').innerHTML += args.join("</br>");
}
say("hi","john");

Ajouter uniquement

 <span id="out"></span>

en HTML



0

Juste pour ajouter quelque chose qui pourrait être utile à certains ...

Si vous ajoutez la console de débogage comme indiqué ci-dessus, vous pouvez accéder à la portée en exécutant ceci:

scope = angular.element (document.querySelector ('[ng-controller = MyCtrl]')). scope ();

Je trouve l'inspection de la portée directement plus facile que console.log, alert (), etc.


avez-vous un exemple d'utilisation, je ne suis pas.
wide_eyed_pupil

Je n'ai aucune idée pourquoi j'ai répondu avec une réponse angulaire, un mauvais fil, je suppose.
Neph

0

Si vous utilisez JSfiddle, vous pouvez utiliser cette bibliothèque: https://github.com/IonicaBizau/console.js

Ajoutez un rawgit de la lib à vos ressources jsfiddle: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Ensuite, vous pouvez simplement ajouter ceci dans le HTML:
<pre class="console"></pre>

Initialisez la console dans votre JS:
ConsoleJS.init({selector: "pre.console"});

Exemple d'utilisation: voir sur jsfiddle

ConsoleJS.init({selector: "pre.console"});

let b;

console.log('hello world');
console.log([{'a':10,'b':44}]);
console.log(typeof [1,2,3,4]);
console.log(50 +67);
console.log(b);

-4

Utilisez la alert()fonction:

alert(variable name);
alert("Hello World");

1
l'alerte n'est jamais un bon outil de débogage - n'affiche pas les objets, interrompt le comportement du code, etc.
Muers
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.