console.log() with jsFiddle

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:

HTML pane:

<div id="console-log"></div>

JavaScript pane (near the top):

?View Code JAVASCRIPT
var consoleLine = "<p class=\"console-line\"></p>";
 
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};

CSS pane:

.console-line
{
    font-family: monospace;
    margin: 2px;
}

18 responses to console.log() with jsFiddle

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 );

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

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!

Leave a Reply to Vito Macchia Cancel Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.