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:

image

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.

image

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.

image

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, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Beben said...

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

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.

http://jquerybyexample.blogspot.com/2012/01/write-and-test-your-jquery-code-online.html