jsFiddle - A site for debugging

Sometimes you just need an environment where you can put together your HTML, CSS and javascript without having to build a server, install different javascript libraries, build your page and all that... you just want to see how this fragment of code would work.  Or you need to show another developer how a certain bit of jQuery or CSS works and you don't have a site they can access.  Maybe you can't get it working, and want to ask your favorite support forum for help?  There are many sites out there which can help, including one that I use for many of my posts here on jUntangled as well as when I'm helping other members of Experts-Exchange with questions they have.  I heard good things about jsFiddle for this purpose, and signed up for a free account there.  Here's what I found...
Once you have an account, you can create your "fiddles".  These consist of 4 panels, each of which has a specific purpose, and some configuration options available from right within the page.  The four panels of jsFiddle are:

• HTML
• CSS
• Javascript
• Results

Simply put - you type or paste your code into each of the first 3 panels, press the [Run] button and your page is displayed in the Results panel.  So far this doesn't sound like something you couldn't do with Notepad and a web browser on your own computer.  Dig deeper, and the benefit becomes more obvious.

Along the left edge of the screen is an accordion with options for your fiddle.  Here you can fine-tune the environment and get documentation on how to use jsFiddle.

Choose Framework:

This is the main tab you'll be using to adjust your environment.  Here you pick the javascript framework to load (if any) and how to execute it.  As of this writing, the available frameworks are:

• Mootools
• jQuery
• Prototype
• YUI
• Glow
• Dojo
• Processing
• ExtJS
• Raphael
• RightJS
• Three
• Zepto
• Enyo
• Shipyard
• MooFX
• Knockout
• The X Toolkit
• AngularJS
• Ember
• Underscore
• Bonsai

Some have only a single version available, but most of the frameworks have multiple versions you can include simply by selecting it from a dropdown.  This is by far the largest benefit of using jsFiddle, since it saves you from having to find, download and install each version if you need to change versions to test your code.  (Something that may work in one version of a framework might not in another, so upgrading to a newer version can either fix or break your code)

Add Resources:

Under this tab, you can add the URL of external CSS or JS files so you don't have to keep that content in the fiddle itself.  This can be useful if you are working with a file that you don't have easy access to change, or to link in files from a Content Delivery Network like Google's jQuery UI CSS 

Info:

Under the Info tab, you can set the title and description of your fiddle.  This is required if you want to make the fiddle public for others to view.  You can also use this tab to change the BODY tag, and the Doctype (DTD).  When debugging CSS, setting the Doctype is crucial.  Many times, just setting the Doctype to anything valid will force the browser not to use "quirks mode" and let it know how to render your content correctly.  (Note: There is also a website named QuirksMode.org, which is a useful reference to check browser compatibility with different HTML, CSS and javascript features)

So now that you've configured your environment, entered your code and run it, you can see the results in the 4th panel at the bottom right of your screen.  You can also run the TidyUp tool to clean up the indenting on your HTML code (making it easier to read) or the JSLint tool to check your javascript for errors.  Saving your code with the Update button will create a new version each time, which you can share individually.    When you're satisfied with the results, you can press the "Set as Base" button to make the currently edited version the default when somebody loads your fiddle.

As I said at the beginning of this post, there are other similar tools out there... but whether you use jsFiddle, JS Bin or another tool, I definitely recommend using something like these to simplify, debug and share your code.