205

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?

Mistalis
  • 17,793
  • 13
  • 73
  • 97
aritroper
  • 1,671
  • 5
  • 16
  • 26

13 Answers13

502

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

Example of the result after adding firebug-lite-debug.js

Alex Weitz
  • 3,199
  • 4
  • 34
  • 57
davidkelleher
  • 5,338
  • 3
  • 14
  • 12
69

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());
IQAndreas
  • 8,060
  • 8
  • 39
  • 74
  • And to pritty print objects... out(JSON.stringify(myObject, null, 2)); – Andrew Lank Mar 17 '14 at 14:52
  • Note that this will have problems with unescaped '<' or '>' characters, and that it will also barf when argument values are . This may not be an issue for your use case, but something to be aware of when replacing calls to console.log(). – Steve Hollasch Jun 25 '15 at 20:42
  • 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](http://jsfiddle.net/wdgfnn0h/2/) – oliverpool Mar 06 '17 at 16:32
  • Somehow this shows nothing to me when trying in jsfiddle. :( – Suma Apr 26 '17 at 09:28
  • @Suma 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) – IQAndreas Apr 28 '17 at 04:37
  • jsfiddle doesn't seem to expose the document object – Kraken Feb 26 '18 at 15:21
39

Try:

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

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

Josh
  • 2,835
  • 1
  • 21
  • 33
  • 2
    You can use `document.getElementById('element').innerHTML += [stuff here] + "
    ";` if you want to have multiple lines and **add** information to the page, instead of just replacing the old information.     – IQAndreas Apr 15 '14 at 05:46
27

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.

IQAndreas
  • 8,060
  • 8
  • 39
  • 74
Euphe
  • 3,531
  • 6
  • 39
  • 69
  • 3
    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. – IQAndreas Apr 15 '14 at 05:40
8

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

$('body').append(yourVariable);
Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
7

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

vkabachenko
  • 251
  • 3
  • 5
5

document.body.innerHTML = "Your data";

Igor Vaschuk
  • 2,794
  • 1
  • 19
  • 11
4

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

JohnPan
  • 1,185
  • 11
  • 21
3

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

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

document.write("¡hola mundo");
skibulk
  • 3,088
  • 1
  • 34
  • 42
0

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.

Neph
  • 399
  • 1
  • 4
  • 10
0

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);
Emmanuel N K
  • 8,710
  • 1
  • 31
  • 37
0

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.

spacebread
  • 503
  • 7
  • 19
-4

Use the alert() function:

alert(variable name);
alert("Hello World");
IQAndreas
  • 8,060
  • 8
  • 39
  • 74
Ashutosh Jha
  • 5
  • 1
    alert is never a good debugging tool -- does not show objects, interrupts behavior of the code, etc etc – Muers Apr 14 '16 at 15:16