Print Var in JsFiddle

Question

How would I print something to the result screen in JsFiddle from my JavaScript. I can't use document.write(), it doesn't allow it, neither print.

What should I use?

Peewee

Check out this example. jsfiddle.net/jadiagaurang/m58Rn – Ginseng

@GaurangJadia That's handy, you should add it as an answer (the only problem is console.log() accepts arguments differently than your custom function). – Anastatius

This is essentially a need for console.log() ... – Inexpiable

Possible duplicate of How to get console inside jsfiddle – Inexpiable

Nowadays jsfiddle allows the use of document.write() – Roofing

Answer 1

To be able to see output from console.log() in JSFiddle, go to External Resources on the left-side panel and add the following link for Firebug:

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

Devan

Fabulous answer. Basically splits the output pane into two panes. – Despatch

This is fantastic, i wish i knew about that sooner. Huge thanks! – Lefthanded

I wish JSFiddle would do this by default, or at least have a very obvious checkbox to enable it with one click. – Requirement

the console only shows up after you've run the code for the first time! great answer btw! – Simmie

best answer in the world. – Aurelia

Is there anything like this for Chrome ? Actually JSFiddle should support something like this out of the box, it would be pretty helpful. – Eddington

This is it! Outstanding answer, exactly what I was looking for. – Lobotomy

If I could upvote this for every time I referred back here, you'd be a god – Tubb

Confirming with @PeterPiper, hit "run" twice to get the console/firebug tabs. Also be aware of the tabs, if you click on an object to see details, when you run again, it will remain on the "DOM" tab, click back on the console tab to see the results of another "run" unless you want to see the entire Dom object! – Gerik

Nothing can beat this answer! – Lundell

Answer 2

I have a template for this purpose; here is the code I use:

HTML

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

JavaScript

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

Sample use (JavaScript)

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

Anastatius

And to pritty print objects... out(JSON.stringify(myObject, null, 2)); – Gerik

Note that this will have problems with unescaped '<' or '>' characters, and that it will also barf when argument values are <undefined>. This may not be an issue for your use case, but something to be aware of when replacing calls to console.log(). – Skittle

Improved version: uses innerText instead of innerHTML and send the log to the original console as well: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) JSFiddle example – Vilhelmina

Somehow this shows nothing to me when trying in jsfiddle. :( – Antifederalist

@Antifederalist Hm, there might be a JavaScript error. It runs fine on my machine, but you might be using a different version. Try opening the debug console and look for errors (make sure to hit the Run button in the top left corner when doing so) – Anastatius

jsfiddle doesn't seem to expose the document object – Girl

Answer 3

Try:

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

Fiddle: http://jsfiddle.net/HKhw8/

Deloresdeloria

You can use document.getElementById('element').innerHTML += [stuff here] + "<br/>"; if you want to have multiple lines and add information to the page, instead of just replacing the old information. – Anastatius

Answer 4

Might not do what you do, but you can type

console.log(string)

And it will print the string into the console of your browser. In chrome push CTRL + SHIFT + J to open the console.

Anamorphism

Or you can use CTRL+SHIFT+K if you want the console to be docked at the bottom of the page, instead of floating around in a separate window. – Anastatius

Answer 5

You can do this ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable); 

Wee

Hhmmm, doesn't work... how would I print out simple text along with a variable – Peewee

Answer 6

Now jsfiddle can do it from the scratch. Just go to Javascrpt --> Frameworks & extensions --> Jquery(edge) and check Firebug lite checkbox

Nikolaus

But I loose syntax highlighting with this :( – Pupa

Answer 7

document.body.innerHTML = "Your data";

Joviality

Better yet, do a += to append. I.e.,: document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>"; – Ancelin

Answer 8

With ES6 tricks could be

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

Add only

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

in HTML

Mcquillin

Answer 9

Here's one alternative: http://jsfiddle.net/skibulk/erh7m9og/1/

document.write = function (str) {
    document.body.insertAdjacentHTML("beforeend", str);
}

document.write("¡hola mundo");

Virg

Answer 10

Just to add something that might be useful to some folks....

If you add the debugger console as shown above, you can access the scope by executing this:

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

I find inspecting the scope directly easier than console.log, alert(), etc.

Wolfgang

do you have an example usage, I dont follow. – Valuer

I have no idea why I answered with an Angular answer, wrong thread I guess. – Wolfgang

Answer 11

If you're using JSfiddle, you can use this library: https://github.com/IonicaBizau/console.js

Add a rawgit of the lib to your jsfiddle resources: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Then you can just add this in the HTML:
<pre class="console"></pre>

Initialize the console in your JS:
ConsoleJS.init({selector: "pre.console"});

Usage Example: See it on 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);

Cassette

Answer 12

I'm not sure why this isn't an answer or upvoted in the comment by Rubén

Nowadays jsfiddle allows the use of document.write() – Rubén Jul 16, 2018 at 19:05

Adding it as an answer for anyone looking.

Supine

Answer 13

Use the alert() function:

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

Fetishism

alert is never a good debugging tool -- does not show objects, interrupts behavior of the code, etc etc – Donyadoodad