jsFiddle is a great tool for quick JavaScript prototyping. While it’s possible to use your browser’s console log to preview bits and pieces of output, I was looking for a cleaner way to do this, using just the jsFiddle panes. I’ve come up with a simple way to add a logging facility to the Result pane if you are using jQuery.
You can either start with my Fiddle directly here or add the following to your Fiddle:
<div id="console-log"> </div>console = {
log: function (text) {
$("#console-log").append($(consoleLine).html(text));
}
};.console-line
{
font-family: monospace;
margin: 2px;
}
Thanks, perfect solution. Just what I was looking for Wayne!
Super useful, thanks for this.
Sweet! Thanks!
Any suggestions for pure JS ?
This really improved jsFiddle, Thank you!
thank you exactly what I was wanting/needing.
2 questions though. I just started really pushing learning more javascript.
1. does anybody prefer JSbin – any quick advantages you see to using jsfiddle – bc jsbin has the console built in.
2. in your object literal – console – do you not need the var in front of console?
ie.
var console = { ...To preserve whitespace in the pseudo-console I preserve whiteSpace.
i.e.
document.getElementById(“console-log”).style.whiteSpace=”pre”;
e.g.
console.log( “Foo w/ multiple spaces” );
var e = “Hello%20%20Javascript World”;
var d = decodeURIComponent(e);
console.log( d );
So smart!
1) for me it doesn’t work
2) won’t work with objects anyway
3) (using Chrome) open developer tools, then in console tab select filter (a weird icon resembling a funnel) and select “result(fiddle.js.net/)” in spite of “”. Et voilà! The real console.log where you can debug anything…
Hello! Thanks for the suggestion! :)
I can’t seem to get it to work however. Here is my fiddle page:
http://jsfiddle.net/B82Qz/
As you can see the very last thing in my javascript is console.log(“hello”). When I click “Run” I don’t see anything. Am I missing something?
Thank you.
Jan
@Jan Tacci – Make sure that you are selecting jQuery in the framework dropdown menu.
Just wanted to thank you for this!
Works perfectly for time I don’t want to hassle with debugger;
You may also consider adding Firebug minified JavaScript as an external resource in JSFiddle. See http://stackoverflow.com/a/22989862/1194486 for more details.
Thanks for this article! It worked perfectly for me.
This came in handy for creating the following https://jsfiddle.net/xj5eate4/, which also owes a lot to http://stackoverflow.com/a/7033662/34806
Thank you for posting this! Very nice learning tool
Thank you! It took a minute for me to realize I needed to change my JS settings to include jQUERY 1.9.1 functionality and add the tag in the HTML, but this helped greatly. I appreciate it!
I’m glad it helped!