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?

aritroper
la source
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
1
Duplication possible de Comment obtenir la console à l'intérieur de jsfiddle
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

davidkelleher
la source
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());
IQAndreas
la source
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/

Piège à flammes
la source
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.

Euphe
la source
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
8

Vous pouvez le faire ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable); 
Mohammad Adil
la source
1
Hhmmm, ça ne marche pas ... comment imprimer un texte simple avec une variable
aritroper
7

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

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

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

Igor Vaschuk
la source
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

JohnPan
la source
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.

Néph
la source
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);
Emmanuel NK
la source
-4

Utilisez la alert()fonction:

alert(variable name);
alert("Hello World");
Ashutosh Jha
la source
1
l'alerte n'est jamais un bon outil de débogage - n'affiche pas les objets, interrompt le comportement du code, etc.
Muers