codepen is nice and sleek playground for front end developers. Codepen it support all possible front end languages. The code snippets are called Pens, you can share your Pens online or showcase on your website. Recently they started supporting projects as well. Codepen allows you to have different views (Editor View, Detail View, Full Page View and debug View) of your created pens. It provides various features for collaborators, Educators and Bloggers. Developers can log in to Codepen using Github, Twitter and Facebook. It support free and Paid version.
Plunker is another popular code playground for front-end developers, it allows for multiple files to be added to your project. which enables to collaborate in real time. It also support live preview, code linting and forking of other projects. It is available and open source under the MIT license.
CSSDesk, unlike it's name, provide code playground for most of the front-end languages. Besides other features , it provide simplicity. It does support public, collaboration and private mode. It does provide CodeCasting feature, though I have not tested it yet. It provide various sharing options to demonstrate your work among your collaboration team.
I tried to cover most populare code playgrounds, the list is extensive. There are many other options like liveweave, Dabblet, livegap, Runnable, scratchpad, snip2code and various others. A complete list (keep growing) is available at wikipedia. All of above playgrounds offer the basic features to troubleshoot your code. It is a developer's personal choice , on which one to use. I personally like Pluker, JSFiddle, cssdeck. I would recommend you to try all and select as per your personal preferences.
I hope you would find above article informative and interesting.in case you need any further information, please feel free to comment , I shall try to reply the comment at the earliest. If you like this article, please like my Facebook page and advise/suggest me for more topics of your interest. Happy Programming!!!