Tuesday, March 31, 2015

JsFiddle with console

How to see console output in JsFiddle ?

Now, all you do is add dummy content to browser. Stop that, Use console log and see them in JsFiddle

" My running JsFiddle with console. :: SPiara JsFiddle "

To all my dear Developers,

Now, when  we start coding we do most test cases in Chrome or Firefox debugger.
Its easy to just check some function output. etc..

However its a bit of pain to writ functions there without indentation and sometimes with errors the console screen gets filled. then you clear console. and then you shuffle through previous code you have written with arrow keys and if you close window or after some days you want to try same thing. you write it again.

All in all it is a pain area. and we all know it. our next best friend is JsFiddle.
Which lets you write save share and have all the necessary libraries available.

But there is one Big Problem.

That is we want to see console logs, Errors and output in developer bar or in the output area.
 But unfortunately that output area is just for HTML browser output.

So, let's fix this. all you need  is " Firebug-lite-debug.js

Here's how i did it.

JsFiddle With Firebug Debugger

3 Steps to see console with JsFiddle.

  1. Login to your JsFiddle account.
  2. In the Left Bar, click on External Resources.
  3. in that text bar enter this url :: firebug-lite-debug
and thats it, click save and Wallah. you will have your own Developer console with the output bar in your JsFiddle.

Another Simple Solution could be to just add this Function in you Java Script.

console.log = function(text){ var elm = document.createElement("div"); elm.style.color = "green"; document.body.appendChild(elm); elm.innerHTML = text; }; console.log("fun"); console.log("fun");