Test your jQuery code Online using jsFiddle

The ‘Works on My Machine’ is a common quote I often get to hear from fellow developers. When it comes to jQuery development, wouldn’t it be nice for developers to be able to see, test and edit each others code, using a common development environment. jsFiddle let’s you do that.

jsFiddle provides an online environment where you can preselect/add popular JavaScript frameworks and test your code. Here’s what the interface looks like:


As you can see, the interface is divided into an HTML editor, CSS Editor, JavaScript Editor and Output. Here’s how the environment looks in action.


Observe the URL http://jsfiddle.net/ZqFp5/

Now if a team member wants to change the Background Color to Blue, he can easily do so and click the Update button. This produces the following output and now both the versions, the old and the new one are available online.


Old Version - http://jsfiddle.net/ZqFp5/

New Version - http://jsfiddle.net/ZqFp5/1/

Slick, I must say!

Update: Check out Elijah’s post Tips using Firebug Lite and Full Screen with jsFiddle

Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal


Beben said...

weks...its awesome...we can look live review

jQuery freak said...

jsBin is another online web playground which also provides the same functionality as jsFiddle but no doubt that jsFiddle is far more superior.